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改變滑鼠移至上方樣式