para - transiciones css ejemplos

Mantener el estado final al final de una animación CSS3.

Question

Estoy ejecutando una animación en algunos elementos que están configurados para opacity: 0; en el CSS. La clase de animación se aplica en clic y, utilizando fotogramas clave, cambia la opacidad de 0 a 1 (entre otras cosas).

Desafortunadamente, cuando la animación ha terminado, los elementos vuelven a la opacity: 0 (tanto en Firefox como en Chrome). Mi pensamiento natural sería que los elementos animados mantengan el estado final, anulando sus propiedades originales. ¿No es esto cierto? Y si no, ¿cómo puedo conseguir que el elemento lo haga?

El código (versiones prefijadas no incluidas):

@keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}

Answer 1

Intente agregar el animation-fill-mode: forwards; . Por ejemplo como este:

animation: bubble 1.0s forwards;
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */

Answer 2

Si está utilizando más atributos de animación, la abreviatura es:

animation: bubble 2s linear 0.5s 1 normal forwards;

para 2s de duración, función de temporización lineal, retardo de 0,5s, 1 cuenta de iteraciones, dirección normal, modo de relleno hacia adelante

Answer 3

SI NO UTILIZA LA VERSIÓN DE MANO CORTO: asegúrese de que el animation-fill-mode: forwards es DESPUÉS de la declaración de animación o no funcionará ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;