CSS Animation property stays after animating

Question

I'm trying to get a CSS animation property to stay after completing, is this possible?

This is what I'm trying to achieve...

The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there.

Here is a fiddle attempt... http://jsfiddle.net/GZx6F/

Here is the code for preservation...

<h2>Test</h2>  <style> @keyframes fadeIn {     0% {         opacity: 0;     }     100% {         opacity: 0.9;     } }  h2 {     animation: fadeIn 1s ease-in-out 3s; } </style> 

I know how to do this with jQuery.. it would be like this...

<h2>test</h2>  <script>   $(document).ready(function(){     $('h2').hide().delay(3000).fadeIn(3000)   }); </script> 

Answer 1

I think you're looking for animation-fill-mode CSS3 property

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.

for your purpose just try to set

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

Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»