CSS中的分层定时动画？

Question

谷歌设计文档指南显示此great transition (video)：

如何重建这个纯CSS3？

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> 

的时机可能不是很正确，但这里有一个快速的N”脏试http://jsfiddle.net/jtup3/1/