css3动画 - css3 animation初始动画卡顿是怎么回事？-PHP中文网问答

css3动画 - css3 animation初始动画卡顿是怎么回事？

巴扎黑 2017-04-17 11:52:37

[CSS3讨论组]

706

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

巴扎黑

全部回复(2)

巴扎黑2017-04-17 11:54:37 2楼

@keyframes tiao{
    0%{ transform: translate(0,0);}
    50%{ transform: translate(0,-20px);}
    75%{ transform: translate(0,0);}
    100%{ transform: translate(0,20px);}
}

这么写，不能在0%的时候就定义-20px，这样会导致瞬间位移，所以看起来成了你说的卡

赞 +0

添加回复

天蓬老师2017-04-17 11:54:37 1楼

.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);}

初始的时候加上-20px可以咯！

赞 +0

添加回复