css chain transition animation

Question

once the page is loaded, I want to "appear" three DIVs one after another.

how can I do this?

I know how to make a single div appear on mouseover but without any triggering, one after another using css, how can I achieve such smooth transition?

I'm not an css animation expert but I guess you need javascript for doing this. — F. Müller, May 05 '12 at 12:41
@RokoC.Buljan - this doesn't ensure a chained reaction, but only a delayed invokation (note that these are not the same). — Eliran Malka, May 05 '12 at 12:54
it may would, but this wasn't posted earlier. it's quite interesting though, i'd like to see it working on a jsFiddle or something similar. please post it as an answer if you think it solves the issue. i'll be sure to up-vote it :) — Eliran Malka, May 05 '12 at 13:00

score 24 · Accepted Answer · edited Apr 11 '19 at 14:29

The trick is to perform an animation first to hide all of the elements (when the page loads), and chain that to the animation that will reveal the elements. This is a working example for you in PURE CSS & HTML:

div.slideIn { 
          position: absolute; 
          top: 200px; 
          width: 100px; 
          height: 100px; 
          border: 1px solid black; 
          animation-name: hide, slideIn;
          animation-duration: 5s;
          animation-timing-function: ease-in;
          animation-iteration-count: 1; 
          -moz-animation-name: hide, slideIn;
          -moz-animation-duration: 5s;
          -moz-animation-timing-function: ease-in;
          -moz-animation-iteration-count: 1; 
          -webkit-animation-name: hide, slideIn;
          -webkit-animation-duration: 5s;
          -webkit-animation-timing-function: ease-in;
          -webkit-animation-iteration-count: 1; 
          -o-animation-name: hide, slideIn;
          -o-animation-duration: 5s;
          -o-animation-timing-function: ease-in;
          -o-animation-iteration-count: 1; 
          opacity: 1;
      } 
      div.slideIn.first {
          left: 50px; 
          animation-delay: 0s, 0s;
          -moz-animation-delay: 0s, 0s;
          -webkit-animation-delay: 0s, 0s;
          -o-animation-delay: 0s, 0s;
      }
      div.slideIn.second {
          left: 150px;
          animation-delay: 0s, 2s;
          -moz-animation-delay: 0s, 2s;
          -webkit-animation-delay: 0s, 2s;
          -o-animation-delay: 0s, 2s;
      }
      div.slideIn.third {
          left: 250px;
          animation-delay: 0s, 4s;
          -moz-animation-delay: 0s, 4s;
          -webkit-animation-delay: 0s, 4s;
          -o-animation-delay: 0s, 4s;
      }
      @keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-moz-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-webkit-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-o-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-moz-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-webkit-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-o-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
]

<div class="slideIn first">I slid in</div> 
    <div class="slideIn second">I'm 2nd</div> 
    <div class="slideIn third">I'm 3rd</div>

Note: Remove the 1% line from the slideIn animation to fade in while sliding in.
Note: IE does not support CSS3 animations yet.

@RokoC.Buljan I was only showing him how to do an animation in CSS because of what F.Muller said. It wasn't hard to work out he could have added a delay and 2 more `div`s. Anyway I've updated the code. — Ozzy, May 05 '12 at 12:59
This option won't work as it is because it leaves the div's on the screen until the animation delay kicks in. Have a look at this jsfiddle http://jsfiddle.net/trickeedickee/pmcTQ/. I would set different animation speeds for the divs and set them off the screen at different pixel heights from the top, I'll put together a quick jsfiddle as my answer to demonstrate. It is pretty hacky and not ideal however. — frontendzzzguy, May 05 '12 at 13:13
@trickeedickee the idea was to give the OP a reference to start with rather than do his homework for him, hence the "something like this" and not "this is it", hiding/showing elements is the most basic javascript you can do — Ozzy, May 05 '12 at 13:17
I understand @Ozzy but surely we should help him out, it can be hard when starting out, at least if he had a working example he could strip it back and work out how it works, or am I being naive? — frontendzzzguy, May 05 '12 at 13:18
@trickeedickee you're more than welcome to help him out! if you feel like editting my answer or posting your own update, feel free to do so. I just thought it was basic enough to move from this to hiding and showing elements at the right time. — Ozzy, May 05 '12 at 13:20
On second thoughts I think you are right, I've been playing about in jsfiddle with the code I have and I don't have time to do the job justice. Your answer should do him as a starting point. — frontendzzzguy, May 05 '12 at 13:30
@trickeedickee actually I just realised the trick was to hide the elements really fast with a first animation then follow up with the animation to show the content. See my updated post. — Ozzy, May 05 '12 at 14:35
That works a treat and it's how I would have handled it. I think it should qualify as a a verified answer. — frontendzzzguy, May 05 '12 at 15:09
Ozzy this seems like work of pure genius. Thank you very much, it looks very nice. I just have one question: When you have two animation names given to a class, what does it mean exactly? Perform them at the same time or one after another other...? Could you explain this a little more if possible, please? — Phil, May 05 '12 at 16:02
@Phil It means to perform a series (a chain) of animations, in this exact order. — Ozzy, May 05 '12 at 16:33

score 10 · Answer 2 · edited May 23 '17 at 11:46

What you probably are looking for are animation callbacks for CSS transitions. Fabrizio Stelluto wrote a great article on the topic, demonstrating several approaches for tackling this very issue.

If you are using jQuery, you can avoid the overhead of feature detection (sniffing) as a plugin has already been written (of course...) for this purpose. You can use it to chain CSS transitions much like you would normally do using JavaScript animation calls under jQuery, i.e. using the animation callbacks to invoke additional callbacks.

In addition, several questions had been posted here on StackOverflow which you may find of use:

score 4 · Answer 3 · answered Mar 22 '13 at 14:57

Using a framework such as jQuery Transit, you can accomplish this with the following:

Javascript:

$(document).ready(function () {

    showDiv($('div:first'));

    function showDiv(div) {
        div.transition({
            opacity: 1
        }, 1000, function () {
            //call back
            showDiv(div.next("div"));
        });
    }
});

HTML:

<div></div>
<div></div>
<div></div>

CSS:

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background-color: black;
    float: left;
    opacity: 0;
}

JS Fiddle Demo

the thread starter wants to learn how to animate not how to use a tool ready made for you. — John Wick, Dec 22 '17 at 11:51

css chain transition animation

3 Answers3

JS Fiddle Demo