問題描述

問題代碼：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);}}

這么寫，不能在0%的時候就定義-20px，這樣會導(dǎo)致瞬間位移，所以看起來成了你說的卡

.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可以咯！