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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

css3動畫播放后如何停止在最后的狀態?

css3動畫播放后如何停止在最后的狀態?

慕碼人2483693 2019-01-30 11:07:00
css3動畫播放后如何停止在最后的狀態？例如動畫從left:0px運動到left:200px，播放完后，又自動跳回left:0px了，如何讓它播放完后，保持在left:200px;?
查看完整描述

3 回答

?
鍵盤上的莫扎特

TA貢獻1條經驗 獲得超1個贊

animation-fill-mode：forwards； //forwards屬性可以讓動畫定格到最后一幀

查看完整回答
1 反對 回復 2019-11-03
?
慕的地8271018

TA貢獻1796條經驗 獲得超4個贊

/*動畫寫成
@keyframes name
{
0%{left:0px;}
100%{left:200px;}
}
動畫定義為只播放1遍，然后動畫樣式后面定義好left:200px就可以了，因為樣式是從前往后執行的。親測成功，希望可以幫到你。

來個例子吧，省得諸位看不懂再給差評：比如1個class叫box的div，照樓主的要求就是：
@keyframes move
{
0%{left:0px;}
100%{left:200px;}
}
.box{animation: move 2s linear 0 1; left: 200px;}
這樣就可以把box的left定在200px。*/

上面是注釋，也是另外的方法。




查看完整回答
反對 回復 2019-02-28
?
侃侃爾雅

TA貢獻1801條經驗 獲得超16個贊

這個可以婉轉的實現，比如默認就讓它在left:200，而且默認是隱藏看不見的，然后
0%-5%{ left:200},
5%-10%{left:0,并顯示出來（opacity=1）}
100%{left:200}

查看完整回答
反對 回復 2019-02-28
  • 3 回答
  • 0 關注
  • 7976 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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