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;
/*頁面加載時，就實現(xiàn)動畫效果*/
animation-name:scroll; //動畫名稱
animation-duration:5s; //動畫時長
animation-timing-function:linear; //動畫速度時間曲線函數(shù)：
animation-delay:5s; //動畫延遲時間：5秒
animation-iteration-count:infinite;//動畫播放次數(shù)：無限循環(huán)
animation-direction:alternate; //動畫播放方向:奇數(shù)播放次數(shù)是正向播放痢甘，偶數(shù)播放次數(shù)時喇嘱，逆向播放
animation-fill-mode:both;//規(guī)定動畫在播放之前或之后，動畫效果是否可見:動畫播放前后都采用填充模式
}
#d1:hover{
animation-play-state:paused; // 規(guī)定動畫的播放狀態(tài)(運行或暫停)
}
以下是運行動圖塞栅，會有5秒的延遲時間哦
初始樣子：
25%時：
50%時：
75%：
注：
- animation-name: 指定調(diào)用動畫的名稱
- animation-duration:完成一個動畫周期的時間:
必須設(shè)置屬性,s | ms 作單位 - animation-timing-function:完成動畫時的速度時間曲線函數(shù)
- animation-delay:動畫播放之前的延遲
- animation-iteration-count: 動畫播放次數(shù)
取值：
1.數(shù)值
2.infinite ：無限次播放 - aniamtion-direction: 動畫播放方向
取值：
1.normal,默認(rèn)值者铜，正向播放(0%~100%)
2.reverse,逆向播放(100%~0%)
3.alternate,奇數(shù)播放次數(shù)是正向播放，偶數(shù)播放次數(shù)時放椰，逆向播放 - 簡寫方式 animation
animation:name duration timing-function delay interation-count direction; - animation-fill-mode:規(guī)定動畫在播放之前或之后作烟，動畫效果是否可見。
取值：
1.none:不改變默認(rèn)行為
2.forwards ：動畫播放完成后砾医，保持在最后一個 幀 的狀態(tài)上
3.backwards ：動畫播放之前(延遲時間內(nèi))拿撩，保持在第一個 幀 的狀態(tài)上
4.both：動畫播放前后都采用填充模式 - animation-play-state: 規(guī)定動畫的播放狀態(tài)(運行或暫停)
取值：
1.paused : 暫停
2.running : 播放
