<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: #ff0789;
            border-radius: 50%;
            /*animation: go 5s;!*animation:调用动画*!*/
            animation-name: go;/*动画名字*/
            animation-duration: 5s;/*动画周期*/
            animation-iteration-count: 2;/*动画次数 infinite无数次*/
            animation-timing-function: linear;/*动画速度 贝塞尔曲线 steps(img)*/
            animation-delay: 1s;/*动画延迟*/
            animation-direction: alternate;/*reverse反向 alternate交替*/
            /*animation-fill-mode: backwards;!*控制元素在动画结束的样式*!*/
            /*backwards 动画播放之前0%的位置的状态 动画初始状态可见 一般和delay一起用可以明显看出效果*/
            /*forwards 动画播放之后100%的位置的状态 动画结束状态可见*/
            /*both 动画播放之前 动画初始状态可见，同时动画播放之后动画结束状态也可见*/
        }
        .box:hover{
            animation-play-state: paused;/*鼠标移动上去暂停*/
        }
        @keyframes go {/*定义关键帧 动画名字*/
            0%{
                background-color: blue;
                transform: translate(0,0);
            }
            25%{
                background-color: black;
                transform: translate(300px,0);
            }
            50%{
                background-color: #999999;
                transform: translate(300px,300px);
            }
            75%{
                background-color: #b9c9fd;
                transform: translate(0,300px);
            }
            100%{
                background-color: blue;
                transform: translate(0,0);
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
<!--
动画复合属性
animation: animation-name animation-duration animation-delay animation-timing-function 后边随意排
-->
</body>
</html>