html - CSS中的分层定时动画？

Question

谷歌设计文档指南展示了这个伟大的转变（视频）：

如何在纯 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/