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

93

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>
css css-animations SparrwHawk
fuente
¿ W3schools está desactualizado? Dice que Chrome y FireFox solo admiten alternativas.
iambriansreed
5
@iambriansreed: siempre supongo que lo es :)
BoltClock
4
@iambriansreed ni siquiera haga clic en los resultados de búsqueda de w3schools. Si lo hace accidentalmente, mire hacia otro lado del monitor y presione el botón Atrás del mouse.
doug65536

Respuestas:

166

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»

Fabrizio Calderan
fuente
1
Gracias Fabrizio, genial, aceptaré esa respuesta. Solo está sucediendo una cosa extraña de la que me pregunto si sabe algo: en iOS (no he probado nada más), la cuenta regresiva para la entrada fácil se detiene cada vez que me desplazo, por ejemplo, si comienzo a desplazarme de inmediato cuando se carga la página no se desvanece. Pero cuando DEJO de desplazarme, los 3 comienzan a contar. ¿Es esto solo el comportamiento predeterminado de iOS? Gracias
SparrwHawk
Qué fantástica solución.
Lalnuntluanga Chhakchhuak
¿Está disponible en animación SVG sin procesar?
Justin
16

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>
Expandir fragmento

yckart
fuente
1

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>
Expandir fragmento

codeWithMe
fuente
0

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

tyau
fuente