Eu tenho um gráfico de barras que anima com CSS3 e a animação ativa no momento em que a página é carregada.

O problema que tenho é que o gráfico de barras dado é colocado fora da tela devido a um monte de conteúdo antes dele, então no momento em que um usuário rola para baixo, a animação já terminou.

Eu estava procurando maneiras, através de CSS3 ou jQuery, de ativar apenas a animação CSS3 no gráfico de barras quando o espectador vê o gráfico.

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

Se você rolar muito rápido logo após o carregamento da página, poderá vê-lo em animação.

Aqui está umjsfiddle do meu código. Além disso, não sei se isso é importante, mas tenho várias instâncias desse gráfico de barras na página.

Eu me deparei com um plug-in do jQuery chamado waypoint, mas não tive absolutamente nenhuma sorte em fazê-lo funcionar.

Se alguém pudesse me apontar na direção certa, seria muito útil.

Obrigado!