У меня есть гистограмма, которая анимируется с помощью CSS3, и анимация в настоящее время активируется при загрузке страницы.

У меня проблема в том, что данная гистограмма находится за пределами экрана из-за большого количества контента перед ним, поэтому к тому времени, когда пользователь прокручивает ее вниз, анимация уже завершена.

Я искал способы через CSS3 или jQuery активировать анимацию CSS3 только на гистограмме, когда зритель видит диаграмму.

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

Если вы прокрутите страницу очень быстро сразу после загрузки страницы, вы увидите, что она оживляет.

Вотjsfiddle моего кода. Кроме того, я не знаю, имеет ли это значение, но у меня есть несколько экземпляров этой гистограммы на странице.

Я сталкивался с плагином jQuery под названием waypoint, но мне совершенно не повезло заставить его работать.

Если бы кто-то мог указать мне правильное направление, это было бы очень полезно.

Спасибо!