La propiedad de animación CSS permanece después de la animación

Estoy tratando de mantener una propiedad de animación CSS después de completar, ¿es posible?

Esto es lo que estoy tratando de lograr ...

El elemento debe estar oculto cuando el usuario aterriza en la página, después de 3 segundos (o lo que sea), debe aparecer y una vez que la animación se ha completado, debe permanecer allí.

Aquí hay un intento de violín ... http://jsfiddle.net/GZx6F/

Aquí está el código de conservación ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

Sé cómo hacer esto con jQuery ... sería así ...

<h2>test</h2>

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

Creo que estás buscando una animation-fill-modepropiedad CSS3.

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

La propiedad CSS animation-fill-mode especifica cómo una animación CSS debe aplicar estilos a su destino antes y después de ejecutarse.

para su propósito, solo intente configurar

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

Configuración del valor de reenvío «el objetivo retendrá los valores calculados establecidos por el último fotograma clave encontrado durante la ejecución»

Además de la respuesta de @Fabrizio Calderan , hay que decir que incluso puedes aplicar la animation-fill-modepropiedad forwardsdirectamente a animation. Entonces, lo siguiente también debería funcionar:

@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>

Cómo animar un elemento y hacer que permanezca mientras se realiza la animación:

// 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>

Me estaba pasando algo similar. Agregué posición: relativa al elemento que estaba animando y eso lo arregló para mí.