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属性

https://developer.mozilla.org/en/CSS/animation-fill-mode

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元素,并为我修复。