html - 用纯CSS动画一个接一个的div

Question

<style>
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.card {
  height: 400px;
  width: 100%;
  max-width: 360px;
  margin: 50px 10px 0px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  animation: bounceIn 0.85s linear forwards;
}

我使用 animated.css 中的代码为我的卡片制作动画。我有多张卡片，我想一张一张地制作动画。第一张卡的延迟为 0.85 秒，第二张为 0.9 秒，第三张为 0.95 秒，依此类推。有没有一种方法可以在 CSS 中执行此操作而无需创建大量新类，例如 .card_1、.card_2 等等？

Answer 1

看起来您正在使用交错动画。以下是执行此操作的两种方法:

Sass 循环

就最终 CSS 代码而言，这是最“昂贵”的，需要进行预处理。如果您没有太多元素，它仍然是可以接受的，并且可以在更多浏览器上工作，如果您必须针对较旧的浏览器。

/* Your previous styles… */
.card {
  $initial-delay: .85s;
  $increase-delay: .1s;
  $total-cards: 10; /* Say you have 10 cards, you can change this number */
  
  @for $i from 1 through $total-cards {
    &:nth-child($i) {
      $zero-i: $i - 1; // Make it zero-based
      animation-delay: #{ $initial-delay + $zero-i * $increase-delay };  
    }
  }
}

CSS 自定义属性

现代浏览器可以使用 css 自定义属性，也称为 CSS 变量。通过将 Sass 示例中的相同值分配到您的标记中，您可以获得相同的结果。

<ul class="card-container" style="--t: 10;">
   <li class="card" style="--i: 0;">Card content…</li>
   <li class="card" style="--i: 1;">Card content…</li>
   <li class="card" style="--i: 2;">Card content…</li>
   <!-- And so on… -->
</ul>

/* Your previous styles… */
.card {
  animation-delay: calc(.85s + .1s * var(--i));
}

更少的 CSS，但您可能需要处理 HTML 输出以在每个元素上附加这些额外的 style 属性。请注意，容器的 --t 赋值在这里不是必需的，但我想确保您可以看到每个方法是如何工作的。