CSS 在 CSS3 动画结束时保持最终状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12991164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maintaining the final state at end of a CSS3 animation
提问by Dan
I'm running an animation on some elements that are set to opacity: 0;in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0to 1(among other things).
我opacity: 0;在 CSS中设置的一些元素上运行动画。动画类应用于点击，并使用关键帧，将不透明度从 更改0为1（除其他外）。
Unfortunately, when the animation is over, the elements go back to opacity: 0(in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?
不幸的是，当动画结束时，元素又回到了opacity: 0（在 Firefox 和 Chrome 中）。我的自然想法是动画元素保持最终状态，覆盖其原始属性。这不是真的吗？如果没有，我怎样才能让元素这样做？
The code (prefixed versions not included):
代码（不包括前缀版本）：
@keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}
回答by Christofer Vilander
Try adding animation-fill-mode: forwards;. For example like this:
尝试添加animation-fill-mode: forwards;. 例如像这样：
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
回答by agiopnl
If you are using more animation attributes the shorthand is:
如果您使用更多动画属性，简写是：
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
这给出：
2sdurationlineartiming-function0.5sdelay1iteration-count (can be infinite)normaldirectionforwardsfill-mode (set backwards if you want to have compatibility to use the end position as the final state)
2s期间linear定时功能0.5s延迟1迭代次数（可以是无限的）normal方向forwards填充模式（如果你想兼容使用结束位置作为最终状态，请向后设置）
回答by Taylor A. Leach
IF NOT USING THE SHORT HAND VERSION:Make sure the animation-fill-mode: forwardsis AFTERthe animation declaration or it will not work...
如果不使用短手版：确保animation-fill-mode: forwards为AFTER动画声明或将无法正常工作...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
对比
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
回答by Deepu Reghunath
Use animation-fill-mode: forwards;
使用 动画填充模式：转发；
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
该元素将保留由最后一个关键帧设置的样式值（取决于动画方向和动画迭代计数）。
Note: The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.
注意：@keyframes 规则在 Internet Explorer 9 及更早版本中不受支持。
Working example
工作示例
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
@-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
@keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}<h1>The keyframes </h1>
<div></div>