html中
<div id="d1"></div>
css中
/*声明动画*/
@keyframes scroll{
0%{
/*宽度，高度，背景颜色*/
width:100px;
height:100px;
background:red;
}
25%{
/*倒角，左外边距，背景颜色*/
border-radius:50%;
margin-left:200px;
margin-top:0px;
background:yellow;
}
50%{
/*倒角，左外边距，上外边距，背景颜色*/
border-radius:50%;
margin-left:200px;
margin-top:200px;
background:blue;
}
75%{
border-radius:50%;
margin-left:0px;
margin-top:200px;
background:green;
}
100%{
border-radius:0px;
margin-top:0px;
background:red;
}
}
#d1{
width:100px;
height:100px;
/*页面加载时，就实现动画效果*/
animation-name:scroll; //动画名称
animation-duration:5s; //动画时长
animation-timing-function:linear; //动画速度时间曲线函数：
animation-delay:5s; //动画延迟时间：5秒
animation-iteration-count:infinite;//动画播放次数：无限循环
animation-direction:alternate; //动画播放方向:奇数播放次数是正向播放，偶数播放次数时，逆向播放
animation-fill-mode:both;//规定动画在播放之前或之后，动画效果是否可见:动画播放前后都采用填充模式
}
#d1:hover{
animation-play-state:paused; // 规定动画的播放状态(运行或暂停)
}
以下是运行动图，会有5秒的延迟时间哦
初始样子：
25%时：
50%时：
75%：
注：
- animation-name: 指定调用动画的名称
- animation-duration:完成一个动画周期的时间:
必须设置属性,s | ms 作单位 - animation-timing-function:完成动画时的速度时间曲线函数
- animation-delay:动画播放之前的延迟
- animation-iteration-count: 动画播放次数
取值：
1.数值
2.infinite ：无限次播放 - aniamtion-direction: 动画播放方向
取值：
1.normal,默认值，正向播放(0%~100%)
2.reverse,逆向播放(100%~0%)
3.alternate,奇数播放次数是正向播放，偶数播放次数时，逆向播放 - 简写方式 animation
animation:name duration timing-function delay interation-count direction; - animation-fill-mode:规定动画在播放之前或之后，动画效果是否可见。
取值：
1.none:不改变默认行为
2.forwards ：动画播放完成后，保持在最后一个 帧 的状态上
3.backwards ：动画播放之前(延迟时间内)，保持在第一个 帧 的状态上
4.both：动画播放前后都采用填充模式 - animation-play-state: 规定动画的播放状态(运行或暂停)
取值：
1.paused : 暂停
2.running : 播放
