问题代码:https://jsfiddle.net/zhoou/qd...
@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
.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!
Written like this, you cannot define -20px at 0%. This will cause instantaneous displacement, so it looks like the stuck you mentioned
You can add -20px at the initial stage!