CSS3-Анимация элементов, если они видны в окне просмотра (прокрутка страницы)

Я добавил анимации CSS к различным элементам div на моей странице html. Но все анимации воспроизводятся в одно и то же время, и я не вижу анимации внизу страницы. Как я могу заставить их играть, пока я прокручиваю вниз по странице?

Ответ 1

Вам нужно использовать JS или jQuery для триггера вашего перехода/анимации CSS3

когда элемент находится в видовом окне **.

jsFiddle demo - Использование плагина inViewport

прослушивание событий load, resize и scroll для получения, если элемент вошел в Видовое окно.
Вы можете использовать небольшой плагин jQuery, который я создал: (fooobar.com/info/85431/...)

Скажем, у вас есть коробки, которые оживляют:

<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>

чем в вашем CSS, у вас есть:

.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); }

где .triggeredCSS3 будет динамически назначаться плагином:

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