Tengo una animación CSS que utiliza keyframes
la cual se ejecuta una sola vez al cargar la página (vea ejemplo citado).
El resultado que busco es un control en JavaScript o JQuery que impida la ejecución de la animación hasta que esta no se encuentre en la zona de la página que el usuario está viendo (el viewport).
He conectado la animación a una clase que aplico al elemento con JavaScript pero no tengo idea de como capturar el evento que debe disparar la acción.
¿Cómo se detecta la presencia de un elemento en el viewport?
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animate {
animation-name: example;
animation-duration: 4s;
}
#cube {
width: 100px;
height: 100px;
background-color: red;
}
<!-- La clase animate viene añadida posteriormente con JavaScript -->
<div id="cube" class="animate"></div>