transiciones transicion para keyframes imagenes ejemplos efectos animaciones css css3 css-animations

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;