用纯 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

不，如果不做像 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 或 class 并更改动画 css 属性以包含 .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。希望这能以某种方式帮助你。祝你好运！

用纯 css 动画一个接一个 div

Animate one div after another with pure css

html

css

keyframe

css-animations

Sass循环

CSS 自定义属性