CSS中animation屬性大家都很常見(jiàn)，而@keyframes大家有聽(tīng)說(shuō)過(guò)嗎？animation屬性里引用@keyframes有一種簡(jiǎn)寫方式，展開(kāi)來(lái)一共有8個(gè)子屬性，通過(guò)它們，我們可以控制各種的動(dòng)畫過(guò)程。

子屬性

• animation-name: 指定一個(gè) @keyframes 的名稱，動(dòng)畫將要使用這個(gè)@keyframes定義。

• animation-duration: 整個(gè)動(dòng)畫需要的時(shí)長(zhǎng)。

• animation-timing-function: 動(dòng)畫進(jìn)行中的時(shí)速控制，比如 ease或 linear

• animation-timing-delay: 動(dòng)畫延遲時(shí)間

• animation-direction: 動(dòng)畫重復(fù)執(zhí)行時(shí)運(yùn)動(dòng)的方向

• animation-iteration-count: 動(dòng)畫循環(huán)執(zhí)行次數(shù)

• animation-fill-mode: 設(shè)置動(dòng)畫執(zhí)行完成后/開(kāi)始執(zhí)行前的狀態(tài)，比如，你可以讓動(dòng)畫執(zhí)行完成后停留在最后一幕，或恢復(fù)到初始狀態(tài)。

• animation-play-state: 暫停/啟動(dòng)動(dòng)畫。

接下來(lái)給大家展示下：

HTML:

<div class="element"></div>

CSS:

顯示效果：

大家可以嘗試自己做下，非常炫酷哦！了解以上的屬性，再也不用擔(dān)心動(dòng)畫效果了。

切版 qieban(.cn)

例

使用簡(jiǎn)寫屬性把 animation 綁定到一個(gè)<div> 元素：

div{animation:mymove5sinfinite; -webkit-animation:mymove5sinfinite; /* Safari 和 Chrome */}

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

語(yǔ)法

animation: animation: name duration timing-function delay iteration-count direction fill-mode play-state;;

如您還有不明白的可以在下面與我留言或是與我探討QQ群{{308855039:0}}，我們一起飛！