Expand circles sequentially using CSS

问题

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 third etc etc. (the circle needs to expand centrally)

This is my circle (there will be 12 in total like this):

<div id="research-area">
    <a class="research-circle rs-<?php echo $counter; ?>" href="<?php echo the_permalink(); ?>" style="background-image:url(<?php echo the_field('icon'); ?>);"></a>
</div>

There's a counter on each circle class outputting 1,2,3 etc up to 12.

How do I sequentially expand each circle using CSS? At the moment each circle just expands from the top left, all at the same time!

#research-area {
  height: 883px;
  width: 980px;
  position: relative;
}
.research-circle {
  height: 156px;
  width: 174px;
  display: block;
  position: absolute;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.research-circle:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.research-circle {
  -webkit-animation: circle 1s;
  -moz-animation: circle 1s;
  -o-animation: circle 1s;
  animation: circle 1s;
}
@keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@-webkit-keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@-moz-keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@-o-keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
.rs-1 {
  left: 393px;
  top: -2px;
}
.rs-2 {
  left: 578px;
  top: 47px;
}
.rs-3 {
  left: 713px;
  top: 183px;
}
.rs-4 {
  left: 763px;
  top: 367px;
}
.rs-5 {
  left: 713px;
  top: 551px;
}
.rs-6 {
  left: 578px;
  top: 687px;
}
.rs-7 {
  left: 394px;
  top: 736px;
}
.rs-8 {
  top: 687px;
  left: 209px;
}
.rs-9 {
  left: 73px;
  top: 551px;
}
.rs-10 {
  left: 24px;
  top: 367px;
}
.rs-11 {
  left: 74px;
  top: 182px;
}
.rs-12 {
  left: 208px;
  top: 47px;
}

回答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>

来源：https://stackoverflow.com/questions/33568319/expand-circles-sequentially-using-css

标签

html

css

css3

css-animations