[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 = 0
        box.classList.remove('animation-block');
        setTimeout(function() {
            box.classList.add('animation-block');
        }, 0)
    }
}, false);

个人简介

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

主目录

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