css3动画如何在动作结束时保持该状态不变

Question

css3动画如何在动作结束时保持该状态不变

Answer 1

animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为。    

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。    

both：向前和向后填充模式都被应用。  

扩展资料：

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块   。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。

Answer 2

1	animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为。    

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。    

both：向前和向后填充模式都被应用。   

Answer 3

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

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