使用纯 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.85s，第二张为 0.9s，第三张为 0.95s，以此类推。有没有办法在 CSS 中做到这一点，而无需创建大量新类，如 .card_1、.card_2 等？

Answer 1

不，如果不做像this 这样非常时髦的事情，您的 .css 文件就无法知道您必须为多少元素设置动画。根据您的环境，如果可能，我建议使用内联样式来使用服务器端逻辑呈现的过渡持续时间，或者如果没有，则使用 JavaScript。

带有 Twig 模板的服务器端示例：

{% for item in items %} 
    <div class="card" style="transition-duration={{ loop.index }}s"></div> 
{% endfor %}

Javascript 示例：

[...document.querySelectorAll('.card')].forEach((card, i) => {
    card.style.transitionDuration = i + 's'
})

我还没有计算出请求的确切延迟，也没有测试上述内容。但这就是方法。

Answer 2

看起来您正在观看交错动画。这里有两种方法：

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，但我想确保您可以看到每种方法的工作原理。

Answer 3

如果不写出每个 id 或类并将动画 css 属性更改为包含 0.05 秒以上，我认为您无法使用纯 css 来做到这一点。

您可以使用 javascript 以编程方式执行此操作。

const beginSpeed = 0.85
const cards = []

cards.forEach((card, i) => {
  cards.push(<div id=`card_${i}` class="card" style=`animation: bounceIn ${beginSpeed + (i * .05)}s linear forwards;` ></div>)
})

或者，如果您只想使用 for 循环

const beginSpeed = 0.85
const numberOfCardsDesired = 40
const cards = []

for(let i = 0; i < numberOfCardsDesired; i++) {
  cards.push(<div id=`card_${i}` class="card" style=`animation: bounceIn ${beginSpeed + (i * .05)}s linear forwards;` ></div>)
}

通过将索引乘以 0.05 倍，它将导致每个后续 div 元素在前一个元素之后乘以 0.05 秒。在您的 css 中，您可以包含带有所有静态 css 元素的卡片。通过这样做，您可以将变量“numberOfCardsDesired”更改为您想要的任何数字，并且许多卡片都会动画

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

如果我的答案不完全符合您的要求，我深表歉意，因为它没有严格使用 CSS。希望这对您有所帮助。祝你好运！