Chain/sequence animation in CSS

Question

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>

You could use the `animation-delay` property but to have it programmatically in sequence you should just use JavaScript. — René, Jan 05 '18 at 18:26
but I want animations to be infinite - after the last element animation ends, the first starts. — Mac, Jan 05 '18 at 18:28

score 5 · Accepted Answer · answered Jan 05 '18 at 18:40

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>

score 1 · Answer 2 · edited May 07 '21 at 17:42

Just add some animation delay:

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

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

Demonstration:

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

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

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

@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>

View on jsFiddle

Chain/sequence animation in CSS

2 Answers2

Linked