Tengo un gráfico de barras que se anima con CSS3 y la animación se activa actualmente a medida que se carga la página.

El problema que tengo es que el gráfico de barras dado se coloca fuera de la pantalla debido a la gran cantidad de contenido que tiene antes, por lo que, cuando el usuario se desplaza hacia él, la animación ya ha finalizado.

Estaba buscando formas a través de CSS3 o jQuery para activar solo la animación CSS3 en el gráfico de barras cuando el espectador ve el gráfico.

<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>

Si se desplaza hacia abajo muy rápido justo después de cargar la página, puede verlo animando.

Aquí hay unjsfiddle de mi código. Además, no sé si esto importa, pero tengo varios ejemplos de este gráfico de barras en la página.

Me he encontrado con un plug-in de jQuery llamado waypoint, pero no tuve ninguna suerte de que funcionara.

Si alguien pudiera apuntarme en la dirección correcta, sería realmente útil.

¡Gracias!