問題描述

今天看了css3的動(dòng)畫，對(duì)animation的其他屬性都比較容易理解，唯獨(dú)這個(gè)animation-fill-mode讓我操碎了心。

找了些下面的描述：

規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。

有四個(gè)值可選，并且允許由逗號(hào)分隔多個(gè)值。

none 不改變默認(rèn)行為。

forwards 當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。

backwards 在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。

both 向前和向后填充模式都被應(yīng)用。

animation-fill-mode: none;animation-fill-mode: forwards;animation-fill-mode: backwards;animation-fill-mode: both;animation-fill-mode: none, backwards;animation-fill-mode: both, forwards, none;

對(duì)于單個(gè)none,forwards,backwards還可以勉強(qiáng)理解，對(duì)于其他的就暈菜了，希望有人指點(diǎn)一下（盡量說的通俗易懂點(diǎn)），最好配上示例或圖例幫助理解。

...

問題解答

假設(shè)有一個(gè)盒子,HTML:

<p class='box'></p>

CSS如下：

.box{ transform: translateY(0);}.box.on{ animation: move 1s;}@keyframes move{ from{transform: translateY(-50px)} to {transform: translateY( 50px)}}使用圖片來表示 translateY 的值與 時(shí)間 的關(guān)系:

橫軸為表示 時(shí)間，為 0 時(shí)表示動(dòng)畫開始的時(shí)間，也就是向 box 加上 on 類名的時(shí)間，橫軸一格表示 0.5s

縱軸表示translateY的值，為 0 時(shí)表示 translateY 的值為 0，縱軸一格表示 50px

animation-fill-mode: none

animation-fill-mode: backwards

animation-fill-mode: forwards

animation-fill-mode: both

通俗的講就是動(dòng)畫結(jié)束之后保持什么狀態(tài)。

none 表示不設(shè)置結(jié)束之后的狀態(tài)，默認(rèn)情況下回到跟初始狀態(tài)一樣。

forwards 表示將動(dòng)畫元素設(shè)置為整個(gè)動(dòng)畫結(jié)束時(shí)的狀態(tài)。

backwards 明確設(shè)置動(dòng)畫結(jié)束之后回到初始狀態(tài)。

both 表示設(shè)置為結(jié)束或者開始時(shí)候的狀態(tài)。一般都是回到默認(rèn)狀態(tài)。

剩下那些逗號(hào)分隔的就是配置多個(gè)。寫幾個(gè) demo 試試就明白了。