Expand circles sequentially using CSS

Question

I have a clock face of circles that I want to appear in order after 1 sec, so grow the first one to full size from zero, then after 1 sec, the second, then after 1 sec, the

Answer 1

Here is a sample using 4 circles. All you have to do is add an animation-delay that is equivalent to the amount of time that will be required for the previous elements to complete the animation. So, first circle should have no animation delay, second should have 1s delay, third should have 2s delay and so on (because the animation-duration for each cycle is 1s).

.research-circle {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px solid;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  animation: scale 1s linear 1 backwards;
}
.rs-1 {
  animation-delay: 0s;
}
.rs-2 {
  animation-delay: 1s;
}
.rs-3 {
  animation-delay: 2s;
}
.rs-4 {
  animation-delay: 3s;
}
@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="research-area">
  <a class="research-circle rs-1" href="#">1</a>
  <a class="research-circle rs-2" href="#">2</a>
  <a class="research-circle rs-3" href="#">3</a>
  <a class="research-circle rs-4" href="#">4</a>
</div>

---

In the above version, each circle starts its animation immediately after the previous one completes its own animation. If you need a delay of 1s between the completion of animation for one element to the start of animation for the next then just increase the animation-delay like in the below snippet.

The logic for calculation of animation-delay is pretty simple. For each element,

• animation-delay = (n-1) * (animation-duration + animation-delay), where n is its index.

.research-circle {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px solid;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  animation: scale 1s linear 1 backwards;
}
.rs-1 {
  animation-delay: 0s;
}
.rs-2 {
  animation-delay: 2s;
}
.rs-3 {
  animation-delay: 4s;
}
.rs-4 {
  animation-delay: 6s;
}
.rs-5 {
  animation-delay: 8s;
}
.rs-6 {
  animation-delay: 10s;
}
.rs-7 {
  animation-delay: 12s;
}
.rs-8 {
  animation-delay: 14s;
}
.rs-9 {
  animation-delay: 16s;
}
.rs-10 {
  animation-delay: 18s;
}
.rs-11 {
  animation-delay: 20s;
}
.rs-12 {
  animation-delay: 22s;
}
@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="research-area">
  <a class="research-circle rs-1" href="#">1</a>
  <a class="research-circle rs-2" href="#">2</a>
  <a class="research-circle rs-3" href="#">3</a>
  <a class="research-circle rs-4" href="#">4</a>
  <a class="research-circle rs-5" href="#">5</a>
  <a class="research-circle rs-6" href="#">6</a>
  <a class="research-circle rs-7" href="#">7</a>
  <a class="research-circle rs-8" href="#">8</a>
  <a class="research-circle rs-9" href="#">9</a>
  <a class="research-circle rs-10" href="#">10</a>
  <a class="research-circle rs-11" href="#">11</a>
  <a class="research-circle rs-12" href="#">12</a>
</div>