問題描述

今天看了css3的動畫，對animation的其他屬性都比較容易理解，唯獨這個animation-fill-mode讓我操碎了心。

找了些下面的描述：

規(guī)定對象動畫時間之外的狀態(tài)。

有四個值可選，并且允許由逗號分隔多個值。

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

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

backwards 在 animation-delay 所指定的一段時間內(nèi)，在動畫顯示之前，應(yīng)用開始屬性值（在第一個關(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;

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

...

問題解答

假設(shè)有一個盒子,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 的值與 時間 的關(guān)系:

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

縱軸表示translateY的值，為 0 時表示 translateY 的值為 0，縱軸一格表示 50px

animation-fill-mode: none

animation-fill-mode: backwards

animation-fill-mode: forwards

animation-fill-mode: both

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

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

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

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

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

剩下那些逗號分隔的就是配置多個。寫幾個 demo 試試就明白了。