css3动画

动画：{
关键帧：@keyframe,
动画：animation(必填 动画名 动画时长)
}

animation:name duration timing-funtion delay iteration-count(播放次数 n|infinite) direction(逆向播放 alternate) play-state(running or paused) fill-mode(动画外状态)

@keyframe {
from {}
（百分比规定发生动画的时间）to{}
}

<style>
        .box{
            width: 200px;
            height: 400px;
            position: relative;
        }
        .box > div{
            position: absolute;
            width: 100px;
            height: 100px;
            animation: move 5s linear infinite alternate;
        }
        @keyframes move {
            0% {
                background-color: red;
                top: 0px;
                left: 0px;
            }
            25% {
                background-color: yellow;
                top: 0px;
                left: 200px;
            }
            50% {
                background-color: blue;
                top: 400px;
                left: 200px;
             }
             75% {
                 background-color: green;
                 top: 400px;
                 left: 0px;
             }
             100% {
                background-color: red;
                top: 0px;
                left: 0px;
            }
        }
    </style>```

<div class="box">
        <div></div>
    </div>

来源：https://blog.csdn.net/qq_39039128/article/details/101349462