No dudes en divulgar nuestra página y códigos con otro, danos de tu ayuda para ampliar esta comunidad.
Solución:
El método más simple para activar animaciones CSS es mediante añadir o eliminar una clase – cómo hacer esto con Javascript puro que puede leer aquí:
¿Cómo agrego una clase a un elemento dado?
Si SÍ usa jQuery (que debería ser realmente fácil de aprender en el uso básico), lo hace simplemente con addClass / removeClass.
Todo lo que tiene que hacer entonces es establecer una transición a un elemento dado como este:
.el
width:10px;
transition: all 2s;
Y luego cambie su estado si el elemento tiene una clase:
.el.addedclass
width:20px;
Nota: Este ejemplo fue con transición. Pero para las animaciones es lo mismo: simplemente agregue la animación en el elemento que tiene una clase.
Aquí hay una pregunta similar: Activar una animación de fotograma clave CSS a través del desplazamiento
Así es como puede usar JavaScript estándar para cambiar/activar una animación asociada con un elemento HTML.
Primerodefines tus animaciones en CSS.
@keyframes spin1 100% transform:rotate(360deg);
@keyframes spin2 100% transform:rotate(-360deg);
@keyframes idle 100%
Luego usas javascript para cambiar entre animaciones.
document.getElementByID('yourElement').style.animation="spin2 4s linear infinite";
Nota: ‘yourElement’ es el elemento HTML de destino que desea animar.
Por ejemplo:
Versión vainilla JS
document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");
Si piensas que ha sido de ayuda nuestro artículo, sería de mucha ayuda si lo compartes con el resto seniors de esta manera nos ayudas a difundir esta información.