閱讀(4.2k) 書(shū)簽贊(0) 我要糾錯(cuò)

CSS動(dòng)畫(huà)攻略

2018-06-07 16:57 更新

大綱

1. Transform（變換）
2. Transition（過(guò)渡）
3. Animation（動(dòng)畫(huà)）
4. 參考列表

在網(wǎng)頁(yè)設(shè)計(jì)中給適當(dāng)?shù)脑靥砑觿?dòng)畫(huà)交互無(wú)疑是一個(gè)大幅度提升用戶(hù)體驗(yàn)的措施。縱觀整個(gè)Web開(kāi)發(fā)的發(fā)展歷史，從最早的原始階段（都是靜態(tài)頁(yè)面），到如今這樣一個(gè)非常講究用戶(hù)體驗(yàn)的時(shí)代，人們?cè)絹?lái)越在意頁(yè)面的表現(xiàn)能力（用戶(hù)體驗(yàn)），干巴巴的展現(xiàn)內(nèi)容往往是沒(méi)有什么競(jìng)爭(zhēng)力的。

就前端開(kāi)發(fā)這個(gè)層面來(lái)說(shuō)，實(shí)現(xiàn)動(dòng)畫(huà)的途徑有好幾種。簡(jiǎn)單來(lái)說(shuō)可能包括下面幾種方式，

使用flash
使用javascript不停的改變dom元素（包括一些第三內(nèi)庫(kù)，比如jquery等）
使用css修飾dom元素

在過(guò)去的幾年內(nèi)，人們大都在使用第一種或者第二種方法來(lái)實(shí)現(xiàn)頁(yè)面動(dòng)畫(huà)。現(xiàn)在看來(lái)前兩種方法的確很low（第一種方法過(guò)重，第二種方法過(guò)于繁瑣）。

CSS3的transform（變換），transition（過(guò)渡），animation（動(dòng)畫(huà)）三個(gè)屬性為純CSS實(shí)現(xiàn)動(dòng)畫(huà)提供了有力的支持。本篇文章我們將會(huì)詳細(xì)的闡述各個(gè)屬性的一般性用法，其中將會(huì)穿插部分示例。

Transform（變換）

CSS3新增了屬性transform，意為變換。那么，什么叫做變換？簡(jiǎn)單的來(lái)說(shuō)就是改變?cè)氐拇笮?、位置、形狀等屬性的操作?/p>

??注意：其實(shí)transform還可以分為2D變換和3D變換。前者表示在二維空間進(jìn)行變換操作（即只有X軸和Y軸），而后者表示在三維空間進(jìn)行變換操作（即除了二維的X軸和Y軸之外還有一個(gè)Z軸）。本篇文章僅對(duì)2D變換做闡述，3D變換的相關(guān)內(nèi)容后面會(huì)專(zhuān)門(mén)作文。

W3C中規(guī)定transform包含如下幾種操作類(lèi)型（這里所有的變換都是在2D變換的范疇內(nèi)），

translate 位移
rotate 旋轉(zhuǎn)
scale 縮放
skew 傾斜
matrix 變換矩陣

一般來(lái)說(shuō)，transform的語(yǔ)法如下，

transform: none | <transform-function> [ <transform-function>]*

none為默認(rèn)值，意為不作任何變換
<transform-function>即為上述提到的各種變換操作
我們可以同時(shí)對(duì)一個(gè)元素進(jìn)行多重變換操作，即可以賦值多個(gè)<transform-function>
當(dāng)進(jìn)行多重變換操作時(shí)，不同的變換操作之間使用空格分割而不是采用一貫的,，切記。

`transform-origin`屬性

在介紹各種變換操作之前，我覺(jué)得很有必要先介紹一下transform-origin屬性。此屬性不屬于transform的操作類(lèi)型，它和transform屬于同一個(gè)level的css屬性，它的作用是用于設(shè)置變換操作的原點(diǎn)。

其語(yǔ)法如下，

transform-origin: [<percentage> | <length> | left | center | right] [<percentage> | <length> | top | center | bottom]?

默認(rèn)值為center center（50% 50%）,默認(rèn)變換原點(diǎn)為元素的中心點(diǎn)。
此屬性接收1-2組值，分別應(yīng)用于X軸與Y軸。如果只設(shè)置第一組值，則第二組值將自動(dòng)采用默認(rèn)值。
當(dāng)參數(shù)值為<percentage> | <length>時(shí)，可以為負(fù)值。

記住，所有的二維變換操作都必須基于一個(gè)原點(diǎn)，默認(rèn)的原點(diǎn)為元素的中心點(diǎn)。

此參數(shù)的瀏覽器兼容性如下，

部分支持的瀏覽器需要我們?cè)趯?shí)際使用時(shí)添加各個(gè)瀏覽器的私有前綴。

下面我們來(lái)看一個(gè)例子見(jiàn)識(shí)一下改變transform-origin后的變換效果，

.demo {
    transform-origin: 100% 0;
    transform: rotate(45deg);
}

效果如下，

圖中左側(cè)的效果應(yīng)用了transform-origin: 100% 0;導(dǎo)致其旋轉(zhuǎn)變換原點(diǎn)轉(zhuǎn)移到了右上角。可于右側(cè)未設(shè)置變換原點(diǎn)的效果圖進(jìn)行對(duì)比體會(huì)其變化。

`translate`

translate意為位移。它的一般性用法如下，

.demo {
    transform: translate(50px, 50px);
}

上面的代碼表示將.demo元素以其變換原點(diǎn)（元素中心點(diǎn)）為基準(zhǔn)，各向右（X軸）和向下（Y軸）移動(dòng)50px。其效果如下圖，

注意：從上圖的效果中，我們可以看出translate其實(shí)是通過(guò)將元素的中心點(diǎn)移動(dòng)到新的位置來(lái)使得整個(gè)元素達(dá)到位移目的的。

translate(50px, 50px)是位移操作最基本的用法，其還有如下幾種變形，

translate(50px)，省略第二個(gè)參數(shù)，此時(shí)只進(jìn)行X軸位移，Y軸位移量默認(rèn)為0。
translate(0, 50px)，可以顯式的聲明X軸位移量為0，這樣僅進(jìn)行Y軸位移。
translateX(50px)，等同于translate(50px, 0)，只進(jìn)行X軸位移。
translateY(50px)，等同于translate(0, 50px)，只進(jìn)行Y軸位移。

`rotate`

rotate意為旋轉(zhuǎn)。它的一般性用法如下，

.demo {
    transform: rotate(45deg);
}

上面代碼表示將.demo元素以其變換原點(diǎn)（元素中心點(diǎn)）為基準(zhǔn)，順時(shí)針旋轉(zhuǎn)45度。效果如下，

rotate(45deg)，接收一個(gè)參數(shù)，此參數(shù)表示旋轉(zhuǎn)的度數(shù)。
rotate的參數(shù)可以傳入一個(gè)正值，亦可以傳入一個(gè)負(fù)值（比如-45deg）。正值表示旋轉(zhuǎn)方向?yàn)?strong>順時(shí)針，負(fù)值表示旋轉(zhuǎn)方向?yàn)?strong>逆時(shí)針。

`scale`

scale意為縮放。它的一般性用法如下，

.demo {
    transform: scale(1.5);
}

上面的代碼表示將.demo元素以其變換原點(diǎn)（元素中心點(diǎn)）為基準(zhǔn)，沿著X軸和Y軸放大1.5倍。效果如下，

scale操作與translate很相似，scale(1.5)是其最基本的用法，除此之外它還有如下幾種變形，

scale(1.5, 1.5)，可以接收兩個(gè)參數(shù)，分別表示X軸方向與Y軸方向的縮放。其中第二個(gè)參數(shù)可以省略。若省略第二個(gè)參數(shù)，則第二個(gè)參數(shù)與第一個(gè)參數(shù)一致。
傳入的參數(shù)如果是<1的值則按比例縮小，若是>1的值則按比例放大。不可傳入負(fù)值。
可以使用scaleX()或者scaleY()進(jìn)行僅對(duì)X軸方向或者Y軸方向進(jìn)行縮放。

`skew`

skew意為傾斜。它的一般性用法如下，

.demo {
    transform: skew(30deg, 30deg);
}

上面的代碼表示將.demo元素以其變換原點(diǎn)（元素中心點(diǎn)）為基準(zhǔn)，沿著X軸順時(shí)針傾斜30度，沿著Y軸順時(shí)針傾斜30度。效果如下，

注意：skew在二維變換中是唯一一個(gè)可以使元素發(fā)生形變的操作。

skew與之前的translate和scale也是類(lèi)似的，接收2個(gè)參數(shù)。其中第二個(gè)參數(shù)可以省略，若省略第二個(gè)參數(shù)，則第二個(gè)參數(shù)將自動(dòng)使用默認(rèn)值0deg。
可以使用skewX()和skewY()進(jìn)行僅X軸方向或者Y軸方向的傾斜。
參數(shù)可以設(shè)置為正值亦可以設(shè)置為負(fù)值。其中正值表示順時(shí)針?lè)较?，?fù)值表示逆時(shí)針?lè)较颉?/li>

`matrix`

關(guān)于matrix的詳細(xì)用法，我這里不想多作闡述。因?yàn)檫@種用法基本很少用到，而且還涉及到一些行列式變換的運(yùn)算。就是說(shuō)了我估計(jì)我也說(shuō)不清楚。這里只要知道matrix是合并了所有的變化操作就行，如果實(shí)在有興趣，可自行查閱相關(guān)文檔。

其實(shí)，transform允許對(duì)同一元素同時(shí)進(jìn)行多個(gè)變換操作，這樣完全可以替代matrix的用法，而且可讀性更佳。

`transform`總結(jié)

看到這里，可能會(huì)一些看官有個(gè)疑問(wèn)，貌似transform并不能實(shí)現(xiàn)動(dòng)畫(huà)啊？

沒(méi)錯(cuò)！

僅僅使用transform是無(wú)法實(shí)現(xiàn)動(dòng)畫(huà)效果的。因?yàn)?code>transform只是對(duì)元素進(jìn)行生硬的變化，這個(gè)變化是瞬間的，所以并沒(méi)有展現(xiàn)一種持續(xù)變化的效果。

一般地，我們可以將其與下面即將說(shuō)道的transition搭配使用來(lái)得到各種動(dòng)畫(huà)效果。

不過(guò)，在適當(dāng)?shù)臅r(shí)候使用transform可以大大簡(jiǎn)化頁(yè)面實(shí)現(xiàn)復(fù)雜度，比如有一個(gè)比較復(fù)雜的展示元素，我們現(xiàn)在需要一個(gè)與之水平對(duì)稱(chēng)的展示，那么此時(shí)只需要rotate即可。

上面所有效果可以在這個(gè)demo中進(jìn)行試驗(yàn)。

Transition（過(guò)渡）

W3C中css3-transition的文檔對(duì)transition的定義是這樣的，

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

意思就是：允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫(huà)效果改變CSS的屬性值。

簡(jiǎn)單來(lái)說(shuō)，transition的含義就是元素某一css屬性的過(guò)渡。

下面讓我們來(lái)詳細(xì)看看transition這貨到底是怎么用的。

transition的語(yǔ)法如下，

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

可以看出transition是一個(gè)復(fù)合屬性，它包括下面四個(gè)子屬性，

transition-property，用于設(shè)置需要過(guò)渡的css屬性
transition-duration，用于設(shè)置過(guò)渡的持續(xù)時(shí)間
transition-timing-function，用于設(shè)置過(guò)渡的速率類(lèi)型（即過(guò)渡的動(dòng)畫(huà)類(lèi)型）
transition-delay，用于設(shè)置過(guò)渡的開(kāi)始延時(shí)

此外transition允許使用,同時(shí)對(duì)一個(gè)元素進(jìn)行多個(gè)屬性的過(guò)渡，比如

.demo {
    transition: width 1s ease-out, height 1s ease-in;
}

這樣我們可以對(duì)同一個(gè)元素的不同的屬性應(yīng)用不同的過(guò)渡策略。

下面我們來(lái)分別對(duì)每個(gè)屬性進(jìn)行描述，其中可能會(huì)穿插一些示例。

`transition-property`

用于設(shè)置需要過(guò)渡的css屬性，語(yǔ)法如下，

transition-property：all | none | <property>[ ,<property> ]*

none，不指定過(guò)渡的css屬性
all，此為默認(rèn)值，指定所有可進(jìn)行過(guò)渡的css屬性
<property>，可自定義需要過(guò)渡的css屬性

這里值得一提的是，不是所有的css屬性都是可以進(jìn)行過(guò)渡的。比如display屬性，比如background-image: url(...)（當(dāng)設(shè)置背景圖片為一個(gè)gradient時(shí)反而是可以應(yīng)用過(guò)渡的），還有一些沒(méi)有明確大小的單位，比如height: auto，等等。

這篇文章中有一份可過(guò)渡的css屬性列表。列表不但指明了哪些css屬性是可以過(guò)渡的，還指明了這些css屬性的取值類(lèi)型（意思就是，這些css屬性必須滿(mǎn)足這些取值條件才可以應(yīng)用過(guò)渡效果）。

這里還有一個(gè)demo，展示了幾乎所有的transition效果。

`transition-duration`

用于設(shè)置過(guò)渡的持續(xù)時(shí)間，語(yǔ)法如下，

transition-duration：<time>[ ,<time> ]*

這個(gè)屬性沒(méi)什么可說(shuō)的，就是用于設(shè)置過(guò)渡的持續(xù)時(shí)間。過(guò)渡時(shí)間越短則動(dòng)畫(huà)運(yùn)行速度越快，過(guò)渡時(shí)間越長(zhǎng)則動(dòng)畫(huà)運(yùn)行越慢。

此屬性的單位為秒（s），默認(rèn)值為0。當(dāng)設(shè)置為0時(shí)，則表示過(guò)渡是瞬間完成的。

`transition-timing-function`

用于設(shè)置過(guò)渡的速率類(lèi)型，語(yǔ)法如下，

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier

這個(gè)屬性相比之前的兩個(gè)屬性要稍微復(fù)雜一點(diǎn)，它的設(shè)置非常多樣化。

我們可以使用預(yù)設(shè)的幾種類(lèi)型：linear（線性過(guò)渡），ease（平滑過(guò)渡，此為默認(rèn)值），ease-in（由慢到快），ease-out（由快到慢），ease-in-out（由慢到快再到慢）
cubic-bezier()，自定義貝塞爾曲線。其實(shí)預(yù)設(shè)的幾種都有對(duì)應(yīng)的貝塞爾曲線。
steps(<integer>[, [ start | end ] ]?)，接受兩個(gè)參數(shù)的步進(jìn)函數(shù)。第一個(gè)參數(shù)必須為正整數(shù)，指定函數(shù)的步數(shù)。第二個(gè)參數(shù)取值可以是start或end，指定每一步的值發(fā)生變化的時(shí)間點(diǎn)。第二個(gè)參數(shù)是可選的，默認(rèn)值為end。
step-start，等同于steps(1, start)
step-end，等同于steps(1, end)

我想這里唯一需要解釋的就是steps相關(guān)的幾種過(guò)渡速率類(lèi)型。steps()的意思就是將整個(gè)過(guò)渡過(guò)程分為特定的步數(shù)，并規(guī)定了每一步過(guò)渡的執(zhí)行時(shí)機(jī)。

比如，

transition-property: all;
transition-duration: 2s;
transition-timing-function: steps(5, end);

這段代碼的效果請(qǐng)參見(jiàn)這個(gè)demo。

steps(5, end)的意思就是，

將整個(gè)持續(xù)2s的過(guò)渡過(guò)程分為5個(gè)步驟。
每一步的過(guò)渡效果將在每一步結(jié)束時(shí)發(fā)生（end）。

Lea Verou的http://cubic-bezier.com/可以可視化定制各種貝塞爾曲線。

MDN上有對(duì)每一種過(guò)渡速率類(lèi)型的效果展示。

`transition-delay`

用于設(shè)置過(guò)渡的開(kāi)始延時(shí)，其語(yǔ)法與transition-duration是一樣的。這里就不再贅述了。

不過(guò)有一點(diǎn)需要注意，當(dāng)我們使用transition簡(jiǎn)寫(xiě)模式的時(shí)候，一般按照如下的格式來(lái)書(shū)寫(xiě)，

.demo {
    transition: all 2s ease 1s;
}

除此之外，你可能還會(huì)看到別人這么寫(xiě)，

.demo {
    transition: 2s 1s
}

僅指明了兩個(gè)時(shí)間參數(shù)，其他的都使用默認(rèn)參數(shù)。此時(shí)第一個(gè)時(shí)間參數(shù)為transition-duration，第二個(gè)時(shí)間參數(shù)為transition-delay。

除此之外，我們還可以利用transition-delay屬性來(lái)達(dá)到一些酷炫的效果，比如

.demo {
    transition: height 1s, width 1s 1s;
}

意思就是先對(duì)height屬性進(jìn)行過(guò)渡，延遲1s后對(duì)width屬性進(jìn)行過(guò)渡，而這個(gè)延遲的時(shí)間正好是前一個(gè)屬性的過(guò)渡時(shí)間，從而整體看起來(lái)非常平滑。詳情可參閱這個(gè)demo。

`transition`總結(jié)

transition簡(jiǎn)單明了，可快速對(duì)元素實(shí)現(xiàn)一些平滑過(guò)渡。不過(guò)它也有自己的適用場(chǎng)景和注意事項(xiàng)。

下面是一些使用transition的注意事項(xiàng)，

由于一些瀏覽器支持原因，在使用transition時(shí)最好添加各個(gè)瀏覽器廠商的私有前綴，將W3C的語(yǔ)法放在最后。
不是所有的CSS屬性都支持transition。
transition需要明確知道開(kāi)始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)。

transition的局限，

transition必須要外力推動(dòng)，比如鼠標(biāo)動(dòng)作，或者js操作等等，否則無(wú)法觸發(fā)過(guò)渡。
transition的過(guò)渡效果是一次性的，除非人為的反復(fù)觸發(fā)。
transition只能接受兩個(gè)邊界狀態(tài)（開(kāi)始和結(jié)束），中間的過(guò)渡狀態(tài)是由瀏覽器自動(dòng)計(jì)算的。無(wú)法人為的指定中間狀態(tài)。

為了解決上述問(wèn)題，CSS Animation應(yīng)用而生了。

Animation（動(dòng)畫(huà)）

animation相比transition制作動(dòng)畫(huà)擁有更高的自定義性，可以定義每一幀的行為。

首先讓我們來(lái)看一個(gè)模擬月食的demo來(lái)體驗(yàn)一下CSS動(dòng)畫(huà)的魅力。

哈哈，感覺(jué)如何，是不是有種很酷炫的感覺(jué)。下面讓我們來(lái)詳細(xì)看看animation的用法吧。

animation的語(yǔ)法如下，

animation: [[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*

與transition一樣，我們可以對(duì)同一個(gè)元素同時(shí)應(yīng)用多個(gè)animation，比如，

@keyframes typing {
    from { width: 0; }
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
h1 {
    font: bold 200% Consolas, Monaco, monospace;
    border-right: .1em solid;
    width: 16.5em; /* fallback */
    width: 30ch; /* # of chars */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate;
}

上述代碼可以實(shí)現(xiàn)一個(gè)非常神奇的效果，它給h1元素同時(shí)應(yīng)用了typing和blink-caret兩種動(dòng)畫(huà)，具體的效果可參見(jiàn)這里。

animation可設(shè)置的屬性還是挺多的，下面讓我們一個(gè)個(gè)的看看每個(gè)屬性的具體用法。

`animation-name`

animation-name意為動(dòng)畫(huà)的名稱(chēng)。如果不設(shè)置animation-name，那么元素將沒(méi)有任何的動(dòng)畫(huà)效果。

其語(yǔ)法如下，

animation-name：none | <identifier> [ , none | <identifier> ]*

none，此為默認(rèn)值，表示不引用任何動(dòng)畫(huà)。
<identifier>，引用由@keyframes定義的動(dòng)畫(huà)名稱(chēng)。

說(shuō)到這個(gè)animation-name屬性，那就不得不說(shuō)一下@keyframes的相關(guān)知識(shí)。

`@keyframes`

@keyframes用于定義動(dòng)畫(huà)的各個(gè)狀態(tài)，我們一般稱(chēng)之為關(guān)鍵幀。其寫(xiě)法非常自由。其一般的寫(xiě)法如下，

@keyframes rainbow {
    0% { background: #c00 }
    50% { background: orange }
    100% { background: yellowgreen }
}

rainbow即為動(dòng)畫(huà)關(guān)鍵幀的名字，被animation引用。
內(nèi)部可以使用0%~100%自定義動(dòng)畫(huà)的各個(gè)狀態(tài)。其中0%表示初始狀態(tài)，100%表示結(jié)束狀態(tài)。
還可以用from來(lái)代替0%表示初始狀態(tài)，可以用to關(guān)鍵字來(lái)代替100%表示結(jié)束狀態(tài)。
未明確的狀態(tài)將由瀏覽器自動(dòng)計(jì)算，且不同狀態(tài)之間是平滑過(guò)渡的（究竟如何過(guò)渡，取決animation-timing-function屬性）。
還可以將多個(gè)狀態(tài)寫(xiě)在一起表示這幾個(gè)狀態(tài)是一樣的，比如

@keyframes moonline {
    0% {
        top:220px;
        left:30%;
        opacity:0;
    }
    30%, 50%, 80% {
        top:100px;
        left:50%;
        opacity:1;
    }
    100% {
        top:220px;
        left:80%;
        opacity:0;
    }
}

`animation-duration`

animation-duration意為動(dòng)畫(huà)持續(xù)時(shí)間，跟之前的transition-duration的含義一致。

其語(yǔ)法如下，

animation-duration：<time> [ , <time> ]*

設(shè)置動(dòng)畫(huà)的持續(xù)時(shí)間，單位為秒（s），其默認(rèn)值為0。

`animation-timing-function`

animation-timing-function用于設(shè)置動(dòng)畫(huà)的速率類(lèi)型。這個(gè)屬性與transition-timing-function基本一致。

其語(yǔ)法如下，

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier

具體的解釋這里就不再贅述了，可參考transition-timing-function。

`animation-delay`

animation-delay用于設(shè)置動(dòng)畫(huà)開(kāi)始的延時(shí)。此屬性與transition-delay基本一致，請(qǐng)參考transition-delay的相關(guān)說(shuō)明。

`animation-iteration-count`

此屬性用于設(shè)置動(dòng)畫(huà)的循環(huán)次數(shù)。其語(yǔ)法如下，

animation-iteration-count：infinite | <number> [ , infinite | <number> ]*

此參數(shù)可以設(shè)置為一個(gè)<integer>，明確標(biāo)示動(dòng)畫(huà)的循環(huán)次數(shù)。默認(rèn)值為1，即動(dòng)畫(huà)只運(yùn)行一次。
還可接收關(guān)鍵字infinite，表示動(dòng)畫(huà)將運(yùn)行無(wú)限次。

`animation-direction`

簡(jiǎn)單來(lái)說(shuō)，此屬性用于設(shè)置動(dòng)畫(huà)在循環(huán)運(yùn)行過(guò)程中是否允許反向運(yùn)動(dòng)。這啥意思呢？

我們知道當(dāng)動(dòng)畫(huà)循環(huán)運(yùn)行時(shí)，一次運(yùn)行周期為：從初始狀態(tài)到結(jié)束狀態(tài)的平滑過(guò)渡。一次運(yùn)行周期結(jié)束后，元素再次下一個(gè)周期，即又從初始狀態(tài)平滑過(guò)渡到結(jié)束狀態(tài)。我們可以利用animation-direction屬性改變動(dòng)畫(huà)運(yùn)行偶數(shù)周期的行為。

此參數(shù)的語(yǔ)法如下，

animation-direction：normal | alternate | reverse | alternate-reverse

normal，表示使用默認(rèn)的行為，不作任何改變。
alternate，允許動(dòng)畫(huà)在偶數(shù)周期期間，讓元素從結(jié)束狀態(tài)平滑過(guò)渡到初始狀態(tài)。
reverse，動(dòng)畫(huà)的所有運(yùn)行周期中，讓元素從結(jié)束狀態(tài)平滑過(guò)渡到初始狀態(tài)。
alternate-reverse，動(dòng)畫(huà)的奇數(shù)周期內(nèi)過(guò)渡方向與設(shè)置的方向相反，偶數(shù)周期內(nèi)過(guò)渡方向與設(shè)置的方向相同。

這四個(gè)預(yù)定義值，一般比較常用的是normal和alternate。下面是一個(gè)例子，

@keyframes rainbow {
    0% {
        background-color: yellow;
    }
    100% {
        background: blue;
    }
}
.demo:hover {
  animation: 1s rainbow 3 normal;
}
.demo2:hover {
  animation: 1s rainbow 3 alternate;
}
.demo3:hover {
  animation: 1s rainbow 3 reverse;
}
.demo4:hover {
  animation: 1s rainbow 3 alternate-reverse;
}

其效果如下，

本demo來(lái)自CSS動(dòng)畫(huà)簡(jiǎn)介。

`animation-play-state`

語(yǔ)法如下，

animation-play-state:running | paused [, running | paused]*

此屬性用于控制動(dòng)畫(huà)的運(yùn)行狀態(tài)。
有兩個(gè)可選值，running（運(yùn)動(dòng)狀態(tài)）和paused（暫停狀態(tài)）。其中running為默認(rèn)值。
當(dāng)某個(gè)動(dòng)畫(huà)從暫停狀態(tài)->運(yùn)動(dòng)狀態(tài)時(shí)，它并不會(huì)重新從初始狀態(tài)開(kāi)始，而是在上次暫停的狀態(tài)繼續(xù)運(yùn)行動(dòng)畫(huà)。

下面讓我們來(lái)看一個(gè)例子。

div {
trueanimation: spin 2s linear infinite;
trueanimation-play-state: paused;
}
div:hover {
    animation-play-state: running;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
true}
trueto {
true    transform: rotate(360deg);
true}
}

具體的效果請(qǐng)參見(jiàn)這個(gè)demo。

`animation-fill-mode`

此屬性用于設(shè)置動(dòng)畫(huà)時(shí)間之外元素的狀態(tài)。這里的動(dòng)畫(huà)時(shí)間之外可能包括動(dòng)畫(huà)開(kāi)始運(yùn)行之前、動(dòng)畫(huà)結(jié)束運(yùn)行之后、動(dòng)畫(huà)暫停運(yùn)行時(shí)。

其語(yǔ)法如下，

animation-fill-mode：none | forwards | backwards | both

none，此為默認(rèn)值，意為不設(shè)置動(dòng)畫(huà)之外的狀態(tài)。
forwards，設(shè)置狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)。
backwards，設(shè)置狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)。
both，設(shè)置狀態(tài)為動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(tài)。當(dāng)循環(huán)運(yùn)行動(dòng)畫(huà)時(shí)，both會(huì)更具根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則。

詳情可參考這個(gè)demo。

`animation`總結(jié)

其實(shí)animation可以說(shuō)是transition的進(jìn)階版本。transition針對(duì)元素的某一個(gè)（或者某幾個(gè)）特定的css屬性進(jìn)行過(guò)渡，而animation可以針對(duì)元素在過(guò)渡期間自定義任意一幀的狀態(tài)。如果不考慮低版本瀏覽器的兼容性，使用css動(dòng)畫(huà)來(lái)提升用戶(hù)體驗(yàn)是一種非常好得方式，

個(gè)人感覺(jué)，從某種意義上來(lái)說(shuō)，設(shè)計(jì)師是決定用戶(hù)體驗(yàn)的第一道門(mén)檻，CSS的相關(guān)內(nèi)容都是實(shí)現(xiàn)。在實(shí)際的工作中，我們可以發(fā)揮自己的想象力，使用css動(dòng)畫(huà)的相關(guān)知識(shí)，組合各種效果。

參考列表

http://www.w3.org/TR/css3-2d-transforms
http://www.w3.org/TR/css3-3d-transforms
http://www.w3.org/TR/css3-transitions
http://www.w3.org/TR/css3-animations
CSS動(dòng)畫(huà)簡(jiǎn)介
CSS3 Transitions, Transforms和Animation使用簡(jiǎn)介與應(yīng)用展示
css in the 4th dimension
CSS3 Transform
CSS3 Transition
CSS3 Animation

以上內(nèi)容是否對(duì)您有幫助：

← WebFont與頁(yè)面ICON圖標(biāo)研究

CSS選擇器的一般性?xún)?yōu)化建議 →

寫(xiě)筆記

我要補(bǔ)充

CSS動(dòng)畫(huà)攻略

Transform（變換）

transform-origin屬性

translate

rotate

scale

skew

matrix

transform總結(jié)

Transition（過(guò)渡）

transition-property

transition-duration

transition-timing-function

transition-delay

transition總結(jié)

Animation（動(dòng)畫(huà)）

animation-name

@keyframes

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-play-state

animation-fill-mode

animation總結(jié)

參考列表

`transform-origin`屬性

`translate`

`rotate`

`scale`

`skew`

`matrix`

`transform`總結(jié)

`transition-property`

`transition-duration`

`transition-timing-function`

`transition-delay`

`transition`總結(jié)

`animation-name`

`@keyframes`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`

`animation-play-state`

`animation-fill-mode`

`animation`總結(jié)