CSS Animation property stays after animating - css

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»

Answer 2

In addition to the answer of #Fabrizio Calderan, it has to be said that you can even apply the animation-fill-mode property forwards directly to animation. So the following should also work:
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
opacity: 0;
animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

Answer 3

How to animate an element and get it to stay as the animation is done:
// Beggin
#box {
/* Give it a width, a height and a background so can see it */
width: 200px;
height: 200px;
/* Unimportant styling */
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
border-radius: 7px;
background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
/* Starts here: */
opacity: 0;
animation: yourName 2800ms ease-in-out 0s forwards;
}
#keyframes yourName {
0% /* (from) */ {
opacity: 0;
}
100% /* (to) */ {
opacity: 1;
}
}
<div id="box"></div>

Answer 4

I had something similar happening to me. I added position:relative to the element that was animating and that fixed it for me.

Answer 5

If I understand your question, you want the animation to remain in the final state .
I would use fill mode
animation-fill-mode: forwards;