Html CSS多个动画关键帧序列和延迟不工作

我创建了两个关键帧。第一个关键帧应用于类为

的所有元素。放入
。第二个关键帧特定于类为
的元素。当第一个关键帧动画完成时，请看我

问题是，即使我在类
的第二个关键帧上添加了延迟。看看我，所有动画仍然在同一时间发生，而不是应用延迟

有人能帮我解决这个问题吗？

在这里查看我的工作：

HTML:

<ul class="box-list">
  <li>
    <div class="box drop-in">
      <h1>The Box</h1>
    </div>
  </li>
  <li>
    <div class="box drop-in">
      <h1>The Box</h1>
    </div>
  </li>
  <li>
    <div class="box drop-in look-at-me">
      <h1>The Box</h1>
    </div>
  </li>
  <li>
    <div class="box drop-in">
      <h1>The Box</h1>
    </div>
  </li>
</ul>

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #222;
}

.box-list {
  list-style: none;

  li {
    width: 140px;
    height: 145px;
    display: inline-block;
    margin-right: 24px;
    position: relative;

    &:last-child {
      margin-right: 0;
    }

    .drop-in {
      -webkit-animation: drop-in-anim 0.3s forwards;
      -moz-animation: drop-in-anim 0.3s forwards;
      animation: drop-in-anim 0.3s forwards;
      opacity: 0;
    }

    .look-at-me {
      -webkit-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
      -moz-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
      animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
      -webkit-animation-delay: 0s, 20s;
      -moz-animation-delay: 0s, 20s;
      animation-delay: 0s, 20s;
    }

    &:nth-child(1) {
      .drop-in {
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s;
      }
    }
    &:nth-child(2) {
      .drop-in {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        animation-delay: 0.3s;
      }
    }
    &:nth-child(3) {
      .drop-in {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        animation-delay: 0.4s;
      }
    }
    &:nth-child(4) {
      .drop-in {
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        animation-delay: 0.5s;
      }
    }

    .box {
      padding: 6px;
      border: 1px solid #333;
      background: #fff;
      z-index: 5;
      text-align: center;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;

      &:hover,
      &.look-at-me {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        transform: scale(1.3);
      }
    }
  }
}

@-webkit-keyframes drop-in-anim {
    0% {
        opacity: 0;
        position: absolute;
        top: 50px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@-moz-keyframes drop-in-anim {
    0% {
        opacity: 0;
        position: absolute;
        top: 50px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@keyframes drop-in-anim {
    0% {
        opacity: 0;
        position: absolute;
        top: 50px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}

@-webkit-keyframes look-at-me-anim {
    50% { -webkit-transform: scale(1.4); }
    75% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1.3); margin: 0 12px; }
}
@-moz-keyframes look-at-me-anim {
    50% { -moz-transform: scale(1.4); }
    75% { -moz-transform: scale(1.2); }
    100% { -moz-transform: scale(1.3); margin: 0 12px; }
}
@keyframes look-at-me-anim {
    50% { transform: scale(1.4); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1.3); margin: 0 12px; }
}

你正在用这个覆盖你的延迟

&:nth-child(3) {
  .drop-in {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
}

你也可以用速记写下延迟：

.look-at-me {
  -webkit-animation:drop-in-anim 0.3s ease-in 0.4s forwards,
   look-at-me-anim 0.5s ease-in 1s forwards;     
 }

除此之外，为什么不使用带有转换延迟的简单transform.scale？发布代码不重要吗？此外，我的大多数代码都在jsfiddle或codepen中查看。如果你从我的会员资格一开始就看，我过去曾发布过代码。如果我明白你的意思。而且我的生活方式和你的不同，所以在做出判断之前要了解别人的情况。“无论如何，谢谢你的回复。”乔纳森说，他贴了一把小提琴，我认为这就足够了。如果你在“没有最小的、完整的、可验证的例子”中投票结束，我认为你应该考虑撤回你的声音。仅链接的问题和答案应编辑为包含代码和演示链接。然后，如果链接真的消失了，有人可以自己复制。@rlemon，现在我明白为什么我应该发布代码了。如果乔纳森给了我建议，告诉我为什么，而不是抱怨和责备，那么事情就不会走这么远了。但是，
rlemon
解释的方式很好。谢谢你的回答。