CSS Animation 동일한 클래스를 가진 여러 div에 대한 지연

Question

여러 div에 작은 애니메이션이로드 된 프로젝트에서 작업하고 있습니다. 그러나 피들을 볼 때 아래에서 볼 수 있듯이 모든 것을 한꺼번에 처리하고 있습니다. 0.1 초의 지연으로 서로를 어떻게 이어 나갈 수 있을까요?

http://jsfiddle.net/HaQmN/38/

감사

.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

당신은 울부 짖는 소리와 같은 애니메이션 지연 속성을 애니메이션을 지연시킬 수 있습니다.

.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; 
} 

하지만 동적 인 번호의 Div가있는 경우에는 많은 CSS와 doest가 아닙니다. 그래서 당신은 자바 스크립트 지연 속성을 하나씩 divs를 추가 할 수 있습니다.