[css] 寫一個動畫，向上勻速移動100px，向下以1.5倍速度移動200px，一直反復循環

.animation-block {width: 50px;height: 50px;background: red;margin-top: 200px;animation: up 1s linear, down 1.5s linear 1s;}@keyframes up {0% {transform: translateY(0px);}50% {transform: translateY(-100px);}100% {transform: translateY(0px);}}@keyframes down {0% {transform: translateY(0px);}50% {transform: translateY(100px);}100% {transform: translateY(0px);}}<div class="animation-block"></div>var box = document.querySelector('.animation-block'); var i = 0 box.addEventListener("webkitAnimationEnd", function() { i++if (i == 2) {i = 0box.classList.remove('animation-block');setTimeout(function() {box.classList.add('animation-block');}, 0)} }, false);

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。