2014-01-17 69 views
0

我有一个与css3动画相关的问题,让我们来做一个淡入的动画,所以我从不透明度设置动画:0到opacity:1;所以我的主要状态是不透明0和100%是不透明1.设置动画之后的状态CSS3

所以问题是,达到100%后;不透明状态返回到0,我希望它出现并保持不变,所以在动画完成后不透明度保持在1。我怎么能做到这一点?

检查我codepen:http://cdpn.io/qjKDlc

祝商祺!

+1

可能重复[在CSS3动画结束时保持最后状态](http://stackoverflow.com/questions/12991164/maintaining-last-state-at-end-of-css3-animation)和[1](http://stackoverflow.com /问题/ 3273478/WebKit的CSS-阿尼马特离子问题持久性的结束状态的动画)[2](http://stackoverflow.com/questions/18457462/css3-animation-keep-reverting-to-original-state)[3 ](http://stackoverflow.com/questions/11122120/css-animations-persistent-end-state)[4](http://stackoverflow.com/questions/3087360/cant-stop-animation-at-end-一个周期) –

回答

0

使用animation-fill-modeforwards值:

如果'animation-fill-mode'值是“前锋”,那么动画将在动画的最后一次迭代后应用在其最后的执行关键帧定义的属性值,直到动画风格被删除。最后执行的关键帧是'to'或'100%'关键帧,除非动画将'animation-direction'设置为'alternate'并且有限次数和偶数次迭代次数,在这种情况下,它是'from'或' 0%'关键帧。

例子:http://jsfiddle.net/FvxVc/2/

+1

谢谢,我刚刚找到答案! – andresmijares25

0

我使用这个属性得到了答案:

animation-fill-mode: forwards; 

它也接受其他参数,如[向前,向后,两者无]的