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

Estoy tratando de obtener una propiedad de animación CSS para permanecer después de completar, ¿es esto 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 desvanecerse y una vez que la animación se haya completado debe permanecer allí.

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

Aquí está 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>
Author: SparrwHawk, 2012-03-19
Source

4 answers

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

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 su ejecución.

Para su propósito solo intente establecer

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

Setting forwards value "el objetivo conservará los valores calculados establecidos por el último fotograma clave encontrado durante la ejecución"

 106
Author: fcalderan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-19 17:26:29

Además de la respuesta de @Fabrizio Calderan, hay que decir que incluso se puede aplicar la propiedad animation-fill-mode forwards directamente a animation. Así que 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>
 7
Author: yckart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:47

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

 0
Author: tyau,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-30 19:56:51

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>
 0
Author: codeWithMe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-16 19:40:59