CSS3的動畫屬性如何使用

給大家收集一下@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中文網其它相關文章！

相關閱讀：

html實現3d懸浮效果的實現步驟

#用H5製作煙火粒子特效的製作方法

怎麼不使用CSS改變滑鼠懸停樣式

以上是CSS3的動畫屬性如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！