How to play different css animations one after another?

Question

I'm trying to play different css animations one after another but I can't figure out how to.

Basically what I'm trying to do is play one Animation, have it on screen for 15 seconds, then play the next one, show it for 15 seconds and on to the next one and when the last one has been played, it should start again from the top.

Here's an example of the first one it should play, show for 15 seconds and then move on to the next one and do the same.

<style> #animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

</style>

<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

And then run another one, show it for 15 seconds and move on.

<style> #animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
</style>

<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Answer 1

The only way to achieve that in pure CSS is to run all the animations at the same time and do some calculations:

• the length of each animation should be the same and equal to the total length of desired animations (meaning if you want two 15-second animations, the CSS animations should be set to length of 30 seconds, no delays)
• to control the start/end point of each animation, you need to modify the percentages accordingly - in the above case, it means that the first animation ends at 50% and that's when the second animation starts. Also, all in-between values need to be interpolated. It's easy for two animations, but you might need to use a calculator as the total number of animations increases. This is if we don't take the delays into account - the numbers change when we have a 15-second animation that will finish animation after 5 seconds, which now equals 33%, etc...

---

It will be more clear once you see it in action here:

.animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}

.animated {  
  animation-duration: 20s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  6% {
    opacity: 1;
    transform: translateX(30px);
  }
  8% {
    transform: translateX(-10px);
  }
  10% {
    transform: translateX(0);
  }
  40% {
    opacity: 1;
    transform: translateX(0);
  }
  42% {
    opacity: 1;
    transform: translateX(30px);
  }
  55% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}



@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  50% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  56% {
    opacity: 1;
    transform: translateY(30px);
  }
  58% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(0);
  }
  92% {
    opacity: 1;
    transform: translateY(30px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Answer 2

animation-delay would do exactly what you're looking for except for the fact that you want the animations to repeat after the last one has been completed; unfortunately there is (currently) no way to specify a delay between iterations of a looping animation.

You could, however, achieve what you're looking to do using a little bit of JavaScript, like the following. To add more animations, simply add their class names to the animations array at the start of the code.

var animations=["bounceInLeft","bounceInDown"],
    count=animations.length,
    classlist=document.querySelector("img").classList,
    holder=document.createElement("div"),
    style=window.getComputedStyle(holder),
    delay=15,
    current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
    wait=0;
    x=0;
    while(x<count){
        setTimeout(function(a){
            classlist.remove(current);
            classlist.add(a);
            current=a;
        },wait*1000,animations[x]);
        holder.className=animations[x];
        wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
        x++;
    }
    setTimeout(animate,wait*1000);
};

img{
    animation-fill-mode:both;
    height:200px;
    width:300px;
}
.bounceInDown{
    animation-duration:1s;
    animation-name:bounceInDown;
}
.bounceInLeft{
    animation-duration:2s;
    animation-name:bounceInLeft;
}
@keyframes bounceInDown{
    0%{
        opacity:0;
        transform:translateY(-2000px);
    }
    60%{
        opacity:1;
        transform:translateY(30px);
    }
    80%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }
}
@keyframes bounceInLeft{
    0%{
        opacity:0;
        transform:translateX(-2000px);
    }
    60%{
        opacity:1;
        transform:translateX(30px);
    }
    80%{
        transform:translateX(-10px);
    }
    100%{
        transform:translateX(0);
    }
}

<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">