Html 使用纯css设置一个又一个div的动画 @关键帧反弹{ 从…起 20%, 40%, 60%, 80%, 到{ -webkit动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）； 动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）； } 0% { 不透明度：0； -webkit转换：scale3d（0.3,0.3,0.3）； 变换：scale3d（0.3,0.3,0.3）； } 20% { -webkit转换：scale3d（1.1,1.1,1.1）； 转换：scale3d（1.1,1.1,1.1）； } 40% { -webkit转换：scale3d（0.9,0.9,0.9）； 变换：scale3d（0.9,0.9,0.9）； } 60% { 不透明度：1； -webkit转换：scale3d（1.03,1.03,1.03）； 变换：scale3d（1.03,1.03,1.03）； } 80% { -webkit转换：scale3d（0.97,0.97,0.97）； 变换：scale3d（0.97,0.97,0.97）； } 到{ 不透明度：1； -webkit转换：scale3d（1,1,1）； 变换：scale3d（1,1,1）； } } .卡片{ 高度：400px； 宽度：100%； 最大宽度：360px； 保证金：50px 10px 0px 10px； 盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）； 过渡：所有0.3立方贝塞尔（.25、.8、.25,1）； 动画：反弹0.85秒线性向前； }

我使用animated.css中的代码为我的卡制作动画。我有多个卡，我想动画一个接一个。第一张卡的延迟为0.85秒，第二张卡的延迟为0.9秒，第三张卡的延迟为0.95秒，依此类推。在CSS中有没有一种方法可以做到这一点，而不用创建大量的新类，比如

.card\u 1

、

.card\u 2

等等？

没有，如果不做一些像.CSS文件这样非常时髦的事情，你就无法知道你需要动画多少元素。根据您的环境，如果可能的话，我建议使用内联样式作为转换持续时间，并使用服务器端逻辑呈现，否则建议使用JavaScript

具有细枝模板的服务器端示例：

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

---

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

看起来您正在寻找交错动画。以下是两种方法：

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

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

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

卡片内容
卡片内容
卡片内容

/*您以前的样式*/
.卡片{
动画延迟：计算（.85s+.1s*var（--i））；
}

---

减少CSS，但您可能需要处理HTML输出，以便在每个项目上附加这些附加的

style

属性。请注意，这里不需要容器的

--t

赋值，但我想确保您可以看到每个方法是如何工作的。

我认为，如果不写出每个id或类并将动画css属性更改为再包含0.05秒，就无法使用纯css完成此操作

您可以使用javascript以编程方式实现这一点

/* 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。希望这对你有所帮助。祝你好运

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

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

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

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