animation后CSSanimation属性保持不变

我想获得一个CSSanimation属性留完后，这是可能的吗？

这是我想要实现的…

元素在用户登陆页面时应该隐藏，3秒（或其他）后，它应该淡入，一旦animation完成，它应该呆在那里。

这是一个小提琴的尝试… 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属性

animation-fill-mode CSS属性指定CSSanimation在执行前后应如何将样式应用于其目标。

为了您的目的只是尝试设置

 h2 { animation: fadeIn 1s ease-in-out 3s; animation-fill-mode: forwards; }

设置转发值“目标将保留在执行期间遇到的最后一个关键帧所设置的计算值”

除了@Fabrizio Calderan的回答，不得不说，你甚至可以将animation-fill-mode属性直接应用到animation 。所以下面也应该工作：

 @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { opacity: 0; animation: fadeIn 1s ease-in-out 3s forwards; }

 <script src="ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <h2>Test</h2>

我有类似的事情发生在我身上。我添加了位置：相对于animation元素，并为我修复。