CSS의 계층 적 시간 지정 애니메이션?</p> <p><img src="https://i.stack.imgur.com/SUAoS.png" alt="animation in progress"></p> <p>가 어떻게 순수 CSS3이를 다시 수행합니다

Question

구글 설계 문서의 지침이 great transition (video) 보여?

Answer 1

각 상자에는 동일한 애니메이션이 첨부되어 있으며, 다른 시간에 실행됩니다. 트랜지션 딜레이 또는 애니메이션 딜레이를 사용하여 이러한 일이 발생할 수 있습니다. 확대/축소는 transform : scale()을 사용하여 수행 할 수 있습니다.

.box { 
    background: #4285f6; 
    margin: 5px; 
    height: 100px; 
    width: 100px; 
    float: left; 
    transition: .35s cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transform: scale(0); 
} 
.holder { 
    max-width: 500px; 
    overflow: hidden; 
    border: 1px solid #000; 
} 
.holder:hover>* { 
    transform: scale(1); 
} 
.holder>*:nth-child(2) {transition-delay: .1s} 
.holder>*:nth-child(3) {transition-delay: .2s} 
.holder>*:nth-child(4) {transition-delay: .3s} 
.holder>*:nth-child(5) {transition-delay: .15s} 
.holder>*:nth-child(6) {transition-delay: .25s} 
.holder>*:nth-child(7) {transition-delay: .35s} 
.holder>*:nth-child(8) {transition-delay: .4s} 

귀하의 HTML은 다음과 같습니다

<div class="holder"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

타이밍이 아주 잘 수 있지만 여기 http://jsfiddle.net/jtup3/1/