css3 상위 및 하위 요소에 대한 순차 애니메이션

Question

부모 요소가 애니메이션을 완료 한 후 하위 요소의 애니메이션을 만들 수 있습니다. 즉, 부모 div가 사라지고 1 초 후에 자식 요소가 사라집니다.

많은 트릭을 시도했지만 아무 것도 작동하지 않습니다. 하위 요소는 여전히 부모와 동시에 퇴색합니다.

여기를 참조하십시오 http://jsfiddle.net/oeLbh43o/

HTML :

<div class="parent"> 
    <h1>The Title Here</h1> 
</div> 

CSS :

.parent { 
    width: 250px; 
    height: 250px; 
    background: #fff; 
    border: 1px solid #000; 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

.parent h1 { 
    -webkit-transition: all 0.9s ease-in-out; 
    -moz-transition: all 0.9s ease-in-out; 
    transition: all 0.9s ease-in-out; 
    opacity: 0; 
} 

.parent:hover { 
    width: 300px; 
    height: 300px; 
} 
.parent:hover h1 { 
    opacity: 1; 
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    animation-delay: 5s; 
} 

많은 감사

Answer 1

당신이 transition-delay 대신 animation-delay를 표시해야합니다, 그래서 당신은 CSS 전환을 사용하는 .

.parent { 
 
    width: 250px; 
 
    height: 250px; 
 
    background: #fff; 
 
    border: 1px solid #000; 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    padding: 10px; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
    -webkit-transition-delay: 2s; 
 
    -moz-transition-delay: 2s; 
 
    transition-delay: 2s; 
 
} 
 

 
.parent h1 { 
 
    -webkit-transition: all 0.9s ease-in-out; 
 
    -moz-transition: all 0.9s ease-in-out; 
 
    transition: all 0.9s ease-in-out; 
 
    opacity: 0; 
 
    -webkit-transition-delay: 0; 
 
    -moz-transition-delay: 0; 
 
    transition-delay: 0; 
 
} 
 

 
.parent:hover { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-transition-delay: 0; 
 
    -moz-transition-delay: 0; 
 
    transition-delay: 0; 
 
} 
 
.parent:hover h1 { 
 
    opacity: 1; 
 
    -webkit-transition-delay: 2s; 
 
    -moz-transition-delay: 2s; 
 
    transition-delay: 2s; 
 
}

<div class="parent"> 
 
    <h1>The Title Here</h1> 
 
</div>