Question

我创建了2个关键帧。第一个关键帧应用于具有类.drop-in的所有元素。当第一个关键帧动画结束时，第二个关键帧特定于具有类.look-at-me的元素。

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

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

在此处查看我的工作： Codepen

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; }
}

Answer 1

你用这个覆盖你的延迟。

&: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;     
 }

CSS多个动画关键帧序列和延迟不起作用

1 个答案: