Elementos CSS3-Animar si están visibles en la ventana gráfica (Desplazamiento de página)

He agregado animaciones CSS a varios elementos div en mi página html. Pero todas las animaciones se reproducen al mismo tiempo y no puedo ver las animaciones en la parte inferior de la página. ¿Cómo puedo hacer que jueguen mientras me desplazo por la página? ?

Deberá usar JS o jQuery para activar su transición / animación CSS3
una vez que el elemento está en la ventana gráfica **.

Demostración jsFiddle – Uso del complemento inViewport

escuchando load , resize y scroll eventos para obtener si un elemento ingresó a la ventana gráfica .
Puedes usar un pequeño plugin jQuery que he creado: ( https://stackoverflow.com/a/26831113/383904 )

Digamos que tiene cuadros que se animan como:

 

que en tu CSS tienes:

 .box{ width:300px; height:300px; margin:500px 50px; background:red; transition: 1.5s; /* THE DURATION */ } .rotate.triggeredCSS3 {transform : rotate(360deg); } .scale.triggeredCSS3 {transform : scale(1.6); } .translate.triggeredCSS3 {transform : translate3d(400px,0,0); } 

donde el .triggeredCSS3 se asignará dinámicamente por el complemento:

 $(".box").inViewport(function(px){ if(px) $(this).addClass("triggeredCSS3") ; });