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

Question

Estoy tratando de obtener una propiedad de animación CSS para quedarse después de completar, ¿es esto posible?

Esto es lo que estoy tratando de lograr ...

El elemento debe estar oculto cuando el usuario accede a la página, después de 3 segundos (o lo que sea), que deben desaparecer dentro y una vez que la animación tiene completado debe permanecer allí.

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

Este es el código para la preservació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> 

Answer 1

Creo que estás buscando animation-fill-mode propiedad CSS3

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

La propiedad CSS-fill-mode animación especifica cómo una animación CSS debe aplicar estilos a su objetivo antes y después de que se esté ejecutando.

para su propósito simplemente tratar de establecer

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

Configuración hacia delante valor «el objetivo será retener a los valores calculados establecidos por el último fotograma clave encontrados durante la ejecución»

Answer 2

Además de la answer de @Fabrizio Calderan, tiene que decir que incluso puede aplicar la propiedad animation-fill-modeforwards directamente al animation. Por lo que el siguiente también 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>

Answer 3

que tenían algo similar ocurra a mí. Agregué la posición: en relación con el elemento que estaba animando y que lo arregló para mí.