为了账号安全,请及时绑定邮箱和手机立即绑定

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条经验 获得超15个赞

这个可以婉转的实现,比如默认就让它在left:200,而且默认是隐藏看不见的,然后
0%-5%{ left:200},
5%-10%{left:0,并显示出来(opacity=1)}
100%{left:200}

查看完整回答
反对 回复 2019-02-28
  • 3 回答
  • 0 关注
  • 7818 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信