La animación CSS3 aporta ricos efectos dinámicos al diseño web, haciendo que la página sea más vívida y atractiva. Sin embargo, a veces queremos que la animación permanezca en su estado final cuando finaliza, en lugar de volver a su estado inicial. Este artículo presentará varias formas de lograr este efecto y garantizar que la animación mantenga este estado al final de la acción.
Método 1: utilizar animation-fill-mode
La propiedad animation-fill-mode se utiliza para controlar el estilo de la animación antes y después de la reproducción. Al establecer esta propiedad, puede lograr el efecto de mantener el estado final cuando finaliza la animación.
none : valor predeterminado, la animación no aplica ningún estilo antes y después de reproducirse. forwards : mantiene el estado final una vez finalizada la animación. backwards : la animación aplica el estado inicial antes de reproducirse. both : Combinando forwards y backwards , la animación aplica el estado inicial antes de reproducirse y mantiene el estado final después de reproducirse. .elemento {
animación: myAnimation 2s entra y sale fácilmente;
modo de relleno de animación: hacia adelante;
}
@keyframes miAnimación {
0% {
transformar: traducirX(0);
}
100% {
transformar: traducirX(100px);
}
} En este ejemplo, el elemento .element permanecerá en transform: translateX(100px) después de que finalice la animación.
Método 2: utilizar el evento animationend
Al escuchar animationend a través de JavaScript, puede establecer manualmente el estilo del elemento cuando finaliza la animación, manteniendo así el estado final de la animación.
Ejemplo
<div clase="elemento"></div>
.elemento {
ancho: 100px;
altura: 100 píxeles;
color de fondo: rojo;
animación: myAnimation 2s entra y sale fácilmente;
}
@keyframes miAnimación {
0% {
transformar: traducirX(0);
}
100% {
transformar: traducirX(100px);
}
} elemento constante = document.querySelector('.elemento');
element.addEventListener('animación final', () => {
element.style.transform = 'translateX(100px)';
}); En este ejemplo, cuando finaliza la animación, el código JavaScript establece la propiedad transform del elemento en translateX(100px) , manteniendo así el estado final de la animación.
Método 3: utilizar el atributo transition
Aunque la propiedad transition se usa principalmente para efectos de transición, al usarla inteligentemente, también puede lograr el efecto de mantener el estado final cuando finaliza la animación.
Ejemplo
<div clase="elemento"></div>
.elemento {
ancho: 100px;
altura: 100 píxeles;
color de fondo: rojo;
transición: transformar 2s con facilidad;
}
.elemento.animado {
transformar: traducirX(100px);
} elemento constante = document.querySelector('.elemento');
element.classList.add('animar'); En este ejemplo, al agregar la clase animate , la propiedad transform del elemento pasa de su estado inicial a translateX(100px) y permanece en ese estado después de que finaliza la transición.
Mantener sin cambios el estado final de una animación CSS3 se puede lograr de varias maneras, incluido el uso animation-fill-mode , escuchar animationend y usar la propiedad transition . Cada método tiene sus escenarios aplicables y los desarrolladores pueden elegir el método apropiado según las necesidades específicas.
animation-fill-mode : adecuado para animación CSS pura, estableciendo forwards para mantener el estado final de la animación. Evento animationend : adecuado para escenas que requieren interacción de JavaScript y establece estilos manualmente escuchando eventos. atributo transition : adecuado para efectos de transición, agregando una clase para mantener el estado final de la animación.Espero que este artículo pueda brindarle una comprensión clara y una guía práctica para ayudarlo a aplicar mejor la animación CSS3 en el desarrollo real y lograr los efectos dinámicos requeridos.
Con esto concluye este artículo sobre cómo mantener el estado final de la animación CSS3 sin cambios. Para obtener más información sobre cómo mantener el estado final de la animación CSS3 sin cambios, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. ¡Hazlo en el futuro! ¡Apoya downcodes.com!