CSS中的链/序列动画 [英] Chain/sequence animation in CSS

问题描述

我希望我的按钮按时间顺序排列-第二个按钮在第一个按钮结束后开始设置动画，依此类推...有人可以帮我达到那个效果吗?

i want my buttons chronologically - the second button start animating after first button ends and so on ... Could somebody help me achieve that effect ?

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>

推荐答案

其他建议，请使用

As others have suggested, use animation-delay to offset each element's animation.

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

In order to loop the entire group, multiply the animation duration by the number of elements and change your keyframes accordingly. Below, I've multiplied the animation duration by three and divided the keyframe percentages by three.

如果您有大量元素或它们是动态添加的，则可能要考虑使用JavaScript，如

If you have a large number of elements or they are added dynamically, you may want to consider using JavaScript, as mentioned here.

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>

这篇关于CSS中的链/序列动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！