CSS 中的链/序列动画

Question

我希望我的按钮按时间顺序排列 - 第二个按钮在第一个按钮结束后开始动画，依此类推...有人可以帮助我实现这种效果吗？

a {
      padding: 6px;
    display: block;
    width: 50px;
    font-size: 17px;
    margin: 10px auto;
    border: 2px solid;
    text-decoration: none;
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,208,0, 0.2);
      box-shadow: 00 0 0 10px rgba(255,208,0, 0.2);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>

Answer 1

正如其他人所建议的，用于animation-delay偏移每个元素的动画。

为了循环整个组，请将动画持续时间乘以元素数量，并相应地更改关键帧。下面，我将动画持续时间乘以三，并将关键帧百分比除以三。

如果您有大量元素或者它们是动态添加的，您可能需要考虑使用 JavaScript，如此处所述。

a {
  padding: 6px;
  display: block;
  width: 50px;
  font-size: 17px;
  margin: 10px auto;
  border: 2px solid;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: pulse 6s infinite;
}

.btn-100 {
  animation-delay: 0s;
}
.btn-500 {
  animation-delay: 2s;
}
.btn-1250 {
  animation-delay: 4s;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }
  23.333% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 208, 0, 0.2);
    box-shadow: 00 0 0 10px rgba(255, 208, 0, 0.2);
  }
  33.333% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

<a class="btn-100" href="#">100</a>
<a class="btn-500" href="#">500</a>
<a class="btn-1250" href="#">1250</a>