CSS3-Animate elements if visible in viewport (Page

Question

I have added CSS animations to various div elements on my html page.But all the animations played at the same time & i can't see the animations at the bottom of the page.How can i make them play while i scroll down the page ?

Answer 1

You'll need to use JS or jQuery to trigger your CSS3 transition / animation
once the element is in viewport**.

jsFiddle demo - Using inViewport plugin

listening to load, resize and scroll events to get if an element entered the Viewport.
You can use a small jQuery plugin I've built: (https://stackoverflow.com/a/26831113/383904)

Let's say you have boxes that animate like:

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

than in your CSS you have:

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

where the .triggeredCSS3 will be assigned dynamically by the plugin:

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