CSS Animation Delay for multiple divs with same class - css

Question

I'm working on a project where multiple div's are loaded with a small animation, but as you can see in the fiddle down, they're carrying all at once. Any idea how do they carry one after another with a delay of 0.1 s?
http://jsfiddle.net/HaQmN/38/
Thanks
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
#-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.example {
display: inline-block;
width:48%;
height:100px;
background:orange;
margin: 1% 1%;
}
<div class="animated fadeInUp example">Hello World</div>

Answer 1

You can delay animation with animation-delay property like bellow.
.animated:nth-child(1){
-webkit-animation-delay: 0.1s;
}
.animated:nth-child(2){
-webkit-animation-delay: 0.2s;
background-color: red;
}
.animated:nth-child(3){
-webkit-animation-delay: 0.3s;
animation-delay: 1.5s;
}
.animated:nth-child(4){
-webkit-animation-delay: 0.4s;
animation-delay: 1.5s;
}
.animated:nth-child(5){
-webkit-animation-delay: 0.5s;
animation-delay: 1.5s;
}
.animated:nth-child(6){
-webkit-animation-delay: 0.6s;
animation-delay: 1.5s;
}
But that is a lot of CSS and doest not suite if you have dynamic number of Divs. so you javascript to add delay property to you divs one by one.