A-A+

css3动画播放后如何停止在最后的状态

2016年01月24日 JavaScript 暂无评论 阅读 349 次

css3动画播放后如何停止在最后的状态
1.animation-fill-mode: forwards;.

2.用JS在一定的时间内给元素加入animation-play-state: paused;这个规则

3.解决100%的宽度不等于原始宽度,完成动画后一瞬间回复到原始宽度的方法,将目标宽度写成一个class 动态添加

/*动画写成
@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。*/

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录