亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

animation-fill-mode當中 none和backward有啥區別?

none????默認值,表示動畫將按預期進行和結束,在動畫完成其最后一幀時,動畫會反轉到初始幀處????
??
backwards????會在向元素應用動畫樣式時迅速應用動畫的初始幀


正在回答

3 回答

先提個問題,怎樣查看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)。

1 回復 有任何疑惑可以回復我~

當你添加animation-delay時間后,就會不一樣了,backwards表示在animation-delay這段時間里應用初始幀0%的狀態。

0 回復 有任何疑惑可以回復我~

其實沒有區別

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

animation-fill-mode當中 none和backward有啥區別?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號