El problema se puede dividir en dos partes:
- Detectar cuando se comienza a ver la
div
para activar la animación
Lo he resuelto utilizando jQuery, mediante la función isElementVisible(elem)
, la cual recibe un elemento por parámetro y determina si es visible en base a distancia de scroll, tamaño de window y la posición del elemento en la página. Esta función se ejecuta al scrollear, he agregado un div
de alto fijo para simular la situación de scroll.
- Una vez detectado lo anterior, poder activar la animación
Esto lo puedes resolver agregando y quitando la class ing
dependiendo de si el elemento es visible o no, de modo que lo más correcto sería que esta clase esté ligada puramente a la animación y no a estilos propios de la div (podrías separarlo en dos clases para no quitar innecesariamente estilos). Aunque esto último no es parte de tu código aún pues no tienes mas que animación en esa clase.
// determina si un elemento comienza a ser visible
function isElementVisible(elem){
let viewScrollTop = $(window).scrollTop(); // distancia de scroll superior
let viewBottom = viewScrollTop + $(window).height(); // distancia de scroll + el alto actual de window (lo no visible por scroll + lo visible)
let topElemD = $(elem).offset().top; // distancia desde el elemento hasta el tope superior del viewport
return (topElemD < viewBottom);
}
// invoco una función anónima en el evento scroll sobre window
$(window).on("scroll" ,function() {
let elem = $('#animated-div'); // obtengo el elemento por id
isElementVisible(elem) ? elem.addClass('ing') : elem.removeClass('ing'); // si es visible agrego la class, de lo contrario la remuevo
});
.ing{
animation-name:ing;
animation-duration:3s;
}
@keyframes ing {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100px; height:1100px;" >
Scroll down !
</div>
<div id="animated-div" class="ing" style="display: table; text-align:center; width:100px; height:100px; border: 1px solid blue;">
<div style="display: table-cell; vertical-align: middle; ">Hello :)</div>
</div>