css3 - 如何理解animation-fill-mode及其使用?
問題描述
今天看了css3的動畫,對animation的其他屬性都比較容易理解,唯獨這個animation-fill-mode讓我操碎了心。
找了些下面的描述:
規(guī)定對象動畫時間之外的狀態(tài)。
有四個值可選,并且允許由逗號分隔多個值。
none 不改變默認行為。
forwards 當動畫完成后,保持最后一個屬性值(在最后一個關(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還可以勉強理解,對于其他的就暈菜了,希望有人指點一下(盡量說的通俗易懂點),最好配上示例或圖例幫助理解。
...
問題解答
回答1:假設(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),默認情況下回到跟初始狀態(tài)一樣。
forwards 表示將動畫元素設(shè)置為整個動畫結(jié)束時的狀態(tài)。
backwards 明確設(shè)置動畫結(jié)束之后回到初始狀態(tài)。
both 表示設(shè)置為結(jié)束或者開始時候的狀態(tài)。一般都是回到默認狀態(tài)。
剩下那些逗號分隔的就是配置多個。寫幾個 demo 試試就明白了。
相關(guān)文章:
1. boot2docker無法啟動2. 關(guān)docker hub上有些鏡像的tag被標記““This image has vulnerabilities””3. docker-compose中volumes的問題4. javascript - mock.js可以存儲數(shù)據(jù)嗎5. nignx - docker內(nèi)nginx 80端口被占用6. java - SSH框架中寫分頁時service層中不能注入分頁類7. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.8. dockerfile - 為什么docker容器啟動不了?9. golang - 用IDE看docker源碼時的小問題10. docker api 開發(fā)的端口怎么獲取?

網(wǎng)公網(wǎng)安備