[email protected]

//animation-name屬性主要是用來調用 @keyframes 定義好的動畫。

//animation-duration主要用來設置CSS3動畫播放時間（其使用方法和transition-duration類似），是用來指定元素播放動畫所持續的時間長。

//animation-timing-function屬性主要用來設置動畫播放方式。（ease、ease-in、ease-out、linear、ease-in-out）

//animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。

//animation-iteration-count屬性主要用來定義動畫的播放次數。（默認1次，infinite為無限次）

//animation-direction屬性主要用來設置動畫播放方向。（normal是默認值，如果設置為normal時，動畫的每次循環都是向前播放；alternate，動畫播放在第偶數次向前播放，第奇數次向反方向播放。）

//animation-play-state屬性主要用來控制元素動畫的播放狀態。其主要有兩個值：running和paused。

//animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。

@keyframes redToBlue{
from{
background: red;
}
20%{
background:green;
}
40%{
background:lime;
}
60%{
background:yellow;
}
to{
background:blue;
}
}

div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
animation-name:redToBlue;
animation-duration: 20s;
animation-timing-function: ease;
animation-delay: 1s;
animation-fill-mode: both;
}

動畫編寫及調用