Chain/sequence animation in CSS [duplicate]

问题

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>

回答1:

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

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.

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>

回答2:

Just add some animation delay.

.btn-500 {
    animation-delay: 0.6s;
}

.btn-1250 {
    animation-delay: 1.3s;
}

JSFiddle

来源：https://stackoverflow.com/questions/48119227/chain-sequence-animation-in-css

标签

html

css

animation