Queue css transition [closed]

Question

I have a problem that don't let me sleep.

Assume that I have these divs:

<div class="container">

    <div class="sixteen columns">
        <div class="dark animated fadeOutRight"><img src="images/dark.gif"></div>
        <h2 class="motto">aspettaci...</h2>
    </div>

</div>

animated with animate.css (but i think that any animation is good as example).

I want to create a sequence of divs that transit in the page. for example.

div1 -> fade out then
after n seconds div2 -> slide in then
div2 -> slide out then div3 comes and STOP...

I try with delay but its a mess and div2 is always visible on the page. I don't really know how to do this. Maybe I have to move all divs out of the pages, or I can do this in much simply way with jQuery?

Answer 1

You can use -webkit-animation-duration and -webkit-animation-delay for simulate effect.

DEMO : http://jsfiddle.net/4bWvQ/

HTML :

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS :

#div1{
    // Some Stuff 
    -webkit-animation-name:move;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
}

#div2{
    // Some Stuff 
    -webkit-animation-name:move;
    -webkit-animation-duration:2s;
    -webkit-animation-delay:1s;
    -webkit-animation-fill-mode: forwards;
}

#div3{
    // Some Stuff 
    -webkit-animation-name:move;
    -webkit-animation-duration:1s;
    -webkit-animation-delay:2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes move{
    from{ // Some Stuff }
    to{ // Some Stuff  }
}

Think to add all prefix for browsers compatibility