小皮QAQ的个人博客 
<html>

<head>
    <style>
        #box {
            width: 30px;
            height: 30px;
            background-color: gray;
            animation-name: myAnimation;
            /* 动画名称 */
            animation-duration: 2s;
            /* 动画持续时间 */
            animation-timing-function: ease-in;
            /* 运动函数 */
            animation-delay: 500ms;
            /* 动画起始延迟 */
            animation-iteration-count: infinite;
            /* 动画重复次数 */
            animation-direction: alternate;
            /**
            * 动画执行方向
            * normal: 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
            * alternate: 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向
            * reverse: 反向运行动画，每周期结束动画由尾到头运行
            * alternate-reverse: 反向交替， 反向开始交替
            */
        }

        @keyframes myAnimation {
            20% {
                transform: translateY(20px);
                /* 向下20px */
            }

            50% {
                transform: translateY(40px);
                /* 再向下20px */
            }

            100% {
                transform: translate(40px, 20px);
                /* 再向右移动20px */
            }
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

←