title: How to play different css animations one after another?
body: <p>I'm trying to play different css animations one after another but I can't figure out how to.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt; #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;
  }
  
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And then run another one, show it for 15 seconds and move on.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt; #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;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg"&gt;</code></pre>
  </div>
  </div>
  </p>