課程
/前端開發
/HTML/CSS
/十天精通CSS3
none????默認值,表示動畫將按預期進行和結束,在動畫完成其最后一幀時,動畫會反轉到初始幀處???? ?? backwards????會在向元素應用動畫樣式時迅速應用動畫的初始幀
2016-05-19
源自:十天精通CSS3 9-9
正在回答
先提個問題,怎樣查看animation-fill-mode中none和backwards的不一樣。
首先設置代碼如下(添加一個div塊,作為對比,并且改變div塊相關屬性,如默認的background背景色、動畫延遲animation-delay、animation-fill-mode),并且執行代碼,能看到效果。
html: <div?class="div1">1</div> <div?class="div2">2</div> css3: .div1?{ ??background:?orange; ??animation-delay:?5s; ??animation-fill-mode:?backwards;? } .div2{ ??background:?orange; ??animation-delay:?5s; ??animation-fill-mode:?none;? }
解釋:backwards(動畫開始時,迅速應用動畫的初始幀),none(動畫完成時,反轉到初始幀),設置的初始幀是orange橘色。點擊提交,div1背景色迅速應用動畫的初始幀red紅色,div2背景色仍停留在初始幀橘色orange。
重點??!backgrounds所指初始幀為動畫的初始幀(RED),none所指初始幀為div塊原本的初始幀(ORANGE)。
當你添加animation-delay時間后,就會不一樣了,backwards表示在animation-delay這段時間里應用初始幀0%的狀態。
其實沒有區別
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
1 回答請問animation-name和animation區別
1 回答animation-fill-mode這個屬性是干嘛的,為啥子我聽不懂啊
4 回答關于animation-fill-mode:both
5 回答animation-duartion和transition-duartion有什么區別
2 回答animation與transition的區別
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-12-08
先提個問題,怎樣查看animation-fill-mode中none和backwards的不一樣。
首先設置代碼如下(添加一個div塊,作為對比,并且改變div塊相關屬性,如默認的background背景色、動畫延遲animation-delay、animation-fill-mode),并且執行代碼,能看到效果。
解釋:backwards(動畫開始時,迅速應用動畫的初始幀),none(動畫完成時,反轉到初始幀),設置的初始幀是orange橘色。點擊提交,div1背景色迅速應用動畫的初始幀red紅色,div2背景色仍停留在初始幀橘色orange。
重點??!backgrounds所指初始幀為動畫的初始幀(RED),none所指初始幀為div塊原本的初始幀(ORANGE)。
2016-07-04
當你添加animation-delay時間后,就會不一樣了,backwards表示在animation-delay這段時間里應用初始幀0%的狀態。
2016-05-20
其實沒有區別