Queue css transition

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?

What exactly have you tried? Some jQuery code to start with would be nice. It's easier to hunt down some error or make some adjustments than to provide code from scratch — ljacqu, Jul 23 '14 at 11:22
It would be good to Google for "jQuery How to chain animations :stackoverflow" and have some sleep — Roko C. Buljan, Jul 23 '14 at 11:27
possible duplicate of [CSS3 Chain Animations](http://stackoverflow.com/questions/7825509/css3-chain-animations) — Zach Saucier, Jul 23 '14 at 12:15

Joffrey Maheo · Answer 1 · 2014-07-23T14:41:39.063

2

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

edited Jul 23 '14 at 14:41

answered Jul 23 '14 at 11:48

Joffrey Maheo

2,919
2
20
23

Note that the other prefixes and unprefixed version of this code are also necessary to be cross browser – Zach Saucier Jul 23 '14 at 12:15
Yes you are right, but this example just shows the principle to achieve this effect has – Joffrey Maheo Jul 23 '14 at 12:40
the problem is that the three objects aren't visible in the windows toghether... Div2 must be hidden and come visible after div1 goes fade out...but i try to use your advice....thanks a lot – Psygno Jul 23 '14 at 16:14
Why you don't use `opacity` css property during the animation for achieve what you want – Joffrey Maheo Jul 24 '14 at 09:47
You can also use percent in keyframes and make a more complicated animation - https://developer.mozilla.org/fr/docs/Web/CSS/@keyframes – Joffrey Maheo Jul 24 '14 at 09:57

score -1 · Answer 2 · answered Jul 23 '14 at 11:55

-1

i understand the u looking for trigger animation one after another ... and one of the easy way to do that is through ".animate()" method.

$( "#div1" ).animate({
   opacity: 0
   }, 5000, function() {
   // 1st Animation complete.
   // start 2nd animation.
       $( "#div2" ).animate({
          opacity: 0
          }, 5000
       );
});

hope this is helpful. And if u can explain more clearly what exactly u trying to achieve, that would help

answered Jul 23 '14 at 11:55

Milan Pal Singh

146
1
6

jQuery's animate performs terribly FYI – Zach Saucier Jul 23 '14 at 12:14
@ZachSaucier how gud it will performs, its on u... as u have customize your animation by yourself. so if u have an example please share. – Milan Pal Singh Jul 23 '14 at 13:14
It in fact does *not* depend on how the developer uses it. The actually jQuery implementation of `.animate` is slow when compared to vanilla javascript, CSS, GSAP, Velocity.js, etc. – Zach Saucier Jul 23 '14 at 14:07
ohh u taking in terms of efficiency.. ya that's true. but its not that terrible to boycott it totally and not to use it for small things. – Milan Pal Singh Jul 23 '14 at 15:28

Queue css transition

2 Answers2