Html 动画后如何保持样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9131026/
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
How to keep styles after animation?
提问by amees_me
I'm working at a portfolio to show when I apply for my next study. Since we're living in 2012, it has tons of fancy animations and CSS3 junk, just to give them the 'We need this guy' feeling. I'm having a little problem at the moment.
我正在做一个作品集，以展示我申请下一个学习的时间。自从我们生活在 2012 年以来，它就有大量花哨的动画和 CSS3 垃圾，只是为了给他们一种“我们需要这个家伙”的感觉。我现在有点问题。
This is a small part of a specific element:
这是特定元素的一小部分：
/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
-moz-animation-duration: 2s;
-moz-animation-name: item;
-moz-animation-delay: 4.5s;
-webkit-animation-duration: 5s;
-webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}
@-webkit-keyframes item {
from {
-webkit-opacity: 0;
}
to {
-webkit-opacity: 1;
}
}
Please note that I left out the Firefox keyframes, since they are quite the same. Right, ugly-formatted CSS that makes elements with the id 'fadein'... fade in.
请注意，我省略了 Firefox 关键帧，因为它们完全相同。正确的，格式丑陋的 CSS，它使 id 为 'fadein' 的元素...淡入。
The problem is, the elements disappear again after the animation is finished. This turns ugly-formatted Css into unusable Css.
问题是，动画完成后元素又消失了。这会将丑陋格式的 Css 变成无法使用的 Css。
Does anybody have any idea how to keep the changed style after the animation?
有人知道如何在动画后保持更改后的样式吗？
I guess this question has been asked before and I'm pretty sorry for that if so.
我想这个问题之前已经被问过，如果是这样，我很抱歉。
回答by methodofaction
Try with:
尝试：
#fadein {
-webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
-moz-animation-fill-mode: forwards; /* FF 5+ */
-o-animation-fill-mode: forwards; /* Not implemented yet */
-ms-animation-fill-mode: forwards; /* IE 10+ */
animation-fill-mode: forwards; /* When the spec is finished */
}
回答by Jake Cattrall
Duopixels answer is the right way, but not totally cross-browser, however, this jquery plugin enables animation callbacks and you can style the elements how you like in the callback function: https://github.com/krazyjakee/jQuery-Keyframes
Duopixels 的答案是正确的方法，但不是完全跨浏览器，但是，这个 jquery 插件启用动画回调，您可以在回调函数中设置您喜欢的元素样式：https: //github.com/krazyjakee/jQuery-Keyframes
