动画CSS3后设置状态答案

【问题标题】：set state after animation CSS3动画CSS3后设置状态
【发布时间】：2014-02-07 07:51:19
【问题描述】：

我有一个关于 css3 动画的问题，让我想制作一个淡入动画，所以我将动画从 opacity: 0 变为 opacity: 1;所以我的主要状态是不透明度 0，100% 是不透明度 1。

所以问题是，达到 100% 之后；不透明度状态回到0，我希望它出现并保持，所以动画完成后不透明度保持在1。我怎样才能做到这一点？

检查我的代码笔：http://cdpn.io/qjKDlc

最好的问候！

【问题讨论】：

Maintaining last state at end of CSS3 animation 和 1 2 3 4 的可能重复项

标签： css css-animations

【解决方案1】：

使用animation-fill-mode，其值为forwards：

如果'animation-fill-mode' 的值为'forwards'，那么动画将在动画的最后一次迭代之后应用在其最后执行的关键帧中定义的属性值，直到动画样式被移除。最后执行的关键帧是 'to' 或 '100%' 关键帧，除非动画将 'animation-direction' 设置为 'alternate' 并且具有有限甚至偶数的迭代次数，在这种情况下它是 'from' 或 ' 0%' 关键帧。

例如：http://jsfiddle.net/FvxVc/2/

【讨论】：

【解决方案2】：

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

animation-fill-mode: forwards;

它还接受其他参数，例如 [forwards, backwards, both, none]

【讨论】：