css - 动画 CSS3 后设置状态

Question

我有一个与 css3 动画相关的问题，今天我想制作一个淡入动画，所以我将动画从不透明度:0 设置为不透明度:1；所以我的主要状态是不透明度 0，100% 是不透明度 1。

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

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

最好的问候!

Answer 1

使用animation-fill-mode值为 forwards:

If the value for 'animation-fill-mode' is 'forwards', then the animation will apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed. The last executing keyframe is the ‘to’ or ‘100%’ keyframe, unless the animation has 'animation-direction' set to 'alternate' and both a finite and even iteration count, in which case it is the ‘from’ or ‘0%’ keyframe.

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