Animation How to - Delay between animation and appear after previous animation

Question

We would like to know how to delay between animation and appear after previous animation.
Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.fadeIn {<!--from  w  w  w .ja  v a2s .c  o  m-->
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: available !important;
}
@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale (1 .1);
    }
    80% {
        transform: scale (0 .9);
        opacity: 1;
    }
    100% {
        transform: scale (1);
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    60% {
        -webkit-transform: scale (1 .1);
    }
    80% {
        -webkit-transform: scale (0 .9);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale (1);
        opacity: 1;
    }
}
.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: available !important;
    opacity: 0.0;
}
@keyframes slideRight {
    0% {
        transform: translateX(-150%);
        opacity: 1;
    }
    50% {
        transform: translateX (8%);
    }
    65% {
        transform: translateX (-4%);
    }
    80% {
        transform: translateX (4%);
    }
    95% {
        transform: translateX (-2%);
    }
    100% {
        transform: translateX (0%);
        opacity: 1;
    }
}
@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateX (80%);
    }
    65% {
        -webkit-transform: translateX (-40%);
    }
    80% {
        -webkit-transform: translateX (4%);
    }
    95% {
        -webkit-transform: translateX (-2%);
    }
    100% {
        -webkit-transform: translateX (0%);
        opacity: 1;
    }
}
.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
    visibility: available !important;
    opacity: 0.0;
}
@keyframes slideLeft {
    0% {
        transform: translateX(150%);
        opacity: 1;
    }
    50% {
        transform: translateX (-8%);
    }
    65% {
        transform: translateX (4%);
    }
    80% {
        transform: translateX (-40%);
    }
    95% {
        transform: translateX (20%);
    }
    100% {
        transform: translateX (0%);
        opacity: 1;
    }
}
@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateX (-8%);
    }
    65% {
        -webkit-transform: translateX (4%);
    }
    80% {
        -webkit-transform: translateX (-4%);
    }
    95% {
        -webkit-transform: translateX (2%);
    }
    100% {
        -webkit-transform: translateX (0%);
        opacity: 1;
    }
}
</style>
</head>
<body>
  <div id="object" class="fadeIn">
  <h2>Object 1</h2>
  </div>
  <div id="object" class="slideRight">Object 2</div>Object 4
        <div id="object" class="slideLeft">
          <h2>Object 3</h2>
        </div>
</body>
</html>
The code above is rendered as follows: