Css3動畫屬性怎么用

這篇文章主要介紹Css3動畫屬性怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

CSS3的動畫屬性

下面的表格列出了 @keyframes 規(guī)則和所有動畫屬性：

屬性   描述   CSS

@keyframes 規(guī)定動畫。

animation     所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

animation-name     規(guī)定 @keyframes 動畫的名稱。  

animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。     

animation-timing-function     規(guī)定動畫的速度曲線。默認是 "ease"。

animation-delay      規(guī)定動畫何時開始。默認是 0。  

animation-iteration-count 規(guī)定動畫被播放的次數(shù)。默認是 1。     

animation-direction     規(guī)定動畫是否在下一周期逆向地播放。默認是 "normal"。

animation-play-state    規(guī)定動畫是否正在運行或暫停。默認是 "running"。

下面兩個例子設(shè)置所有動畫屬性：

OperaSafariChromeFirefoxInternet Explorer

實例

運行myfirst動畫，設(shè)置所有的屬性：

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;

}

以上是“Css3動畫屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！