我试图得到一个CSS动画属性完成后，留下来，这是可能吗？
这是我想要实现的…
元素应该在用户到达页面时被隐藏，3秒钟(或任何)后，它应该淡入，一旦动画完成，它应该保持在那里。
这里是一个小提琴尝试…
http://jsfiddle.net/GZx6F/
这里是保存的代码…
<h2>Test</h2>
<style>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
animation: fadeIn 1s ease-in-out 3s;
}
</style>
我知道如何做到这一点与jQuery ..它会是这样的…
<h2>test</h2>
<script>
$(document).ready(function(){
$('h2').hide().delay(3000).fadeIn(3000)
});
</script>
解决方法
我想你正在寻找animation-fill-mode CSS3属性
https://developer.mozilla.org/en/CSS/animation-fill-mode
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
为您的目的只是尝试设置
h2 {
animation: fadeIn 1s ease-in-out 3s;
animation-fill-mode: forwards;
}
设置转发值«目标将保留执行期间遇到的最后一个关键帧设置的计算值»
