[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);

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题