css3动画 - css3 animation初始动画卡顿是怎么回事?
巴扎黑
巴扎黑 2017-04-17 11:52:37
0
2
636

问题代码:
https://jsfiddle.net/zhoou/qd...

巴扎黑
巴扎黑

reply all(2)
巴扎黑
@keyframes tiao{
    0%{ transform: translate(0,0);}
    50%{ transform: translate(0,-20px);}
    75%{ transform: translate(0,0);}
    100%{ transform: translate(0,20px);}
}

Written like this, you cannot define -20px at 0%. This will cause instantaneous displacement, so it looks like the stuck you mentioned

Peter_Zhu
.cir li{ float: left; width: 20px; height: 20px; border-radius: 50%; margin:10px; background: #ccc; line-height: 20px; text-align: center;transform: translate(0,-20px);}

You can add -20px at the initial stage!

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template