欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

css 抖动 跳动 弹跳 有大用

立即咨询 按钮跳动 弹跳

image.png



.bounces {
-webkit-animation: bounces 2s infinite;
-o-animation: bounces 2s infinite;
animation: bounces 2s infinite
}

@-webkit-keyframes bounces {
0%, 20%, 50%, 80%, to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
transform: translateZ(0);
-webkit-transform: translateZ(0)
}
40%, 43% {
animation-timing-function: cubic-bezier(.755, .05, .855, .06);
transform: translate3d(0, -4px, 0);
-webkit-transform: translate3d(0, -4px, 0)
}
70% {
animation-timing-function: cubic-bezier(.755, .05, .855, .06);
transform: translate3d(0, -2px, 0);
-webkit-transform: translate3d(0, -2px, 0)
}
90% {
transform: translate3d(0, -1px, 0);
-webkit-transform: translate3d(0, -1px, 0)
}
}

@keyframes bounces {
0%, 20%, 50%, 80%, to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
transform: translateZ(0);
-webkit-transform: translateZ(0)
}
40%, 43% {
animation-timing-function: cubic-bezier(.755, .05, .855, .06);
transform: translate3d(0, -4px, 0);
-webkit-transform: translate3d(0, -4px, 0)
}
70% {
animation-timing-function: cubic-bezier(.755, .05, .855, .06);
transform: translate3d(0, -2px, 0);
-webkit-transform: translate3d(0, -2px, 0)
}
90% {
transform: translate3d(0, -1px, 0);
-webkit-transform: translate3d(0, -1px, 0)
}
}



普通分类: