para - transiciones css ejemplos
Mantener el estado final al final de una animaciĆ³n CSS3. (3)
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 */
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; }
}
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
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;