給大家收集一下@keyframes 規則和所有動畫屬性，我們都知道@keyframes 是規定動畫的意思，下面做一個實戰案例，幫助大家理解，一起來看一下。
屬性 描述 CSS
@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
animation-timing-function 規定動畫的速度曲線。預設是 "ease"。
animation-delay 規定動畫何時開始。預設是 0。
animation-iteration-count 規定動畫被播放的次數。預設是 1。
animation-direction 規定動畫是否在下一週期反向播放。預設是 "normal"。
animation-play-state 規定動畫是否正在運作或暫停。預設是 "running"。
下面兩個範例設定所有動畫屬性：
OperaSafariChromeFirefoxInternet Explorer
實例
執行myfirst動畫，設定所有的屬性：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是CSS3的動畫屬性如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
