How to play different css animations one by one?

Question

I am trying to play different css animations one by one, but I cannot figure out how to do this.

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

Here is an example of the first one that he should play, show for 15 seconds, and then go to the next 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">

Run codeHide result

Then run another one, show it for 15 seconds and continue.

<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">

Run codeHide result

Answer 1

- , : http://digitalfio.imtqy.com/Stagger.css/

, 15 , .

Answer 2

animation-delay , , , , , ; , .

, , JavaScript, . , animations .

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">

Hide result

Answer 3

CSS - :

• ( , 15 , CSS ​​ 30 , )
• / - , 50% . . , , . - , 15- , 5 , 33% ..

---

, :

.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">

Run codeHide result