欢迎各位兄弟 发布技术文章
这里的技术是共享的
立即咨询 按钮跳动 弹跳
.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)
}
}