html - 使用 CSS 按顺序扩展圆圈

Question

我有一个圆圈的钟面，我想在 1 秒后按顺序出现，所以将第一个从零增长到完整大小，然后在 1 秒后，第二个，然后在 1 秒后，第三个等等。 (圈子需要向中心展开)

这是我的圈子(这样总共会有12个):

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

每个圆类都有一个计数器，输出 1、2、3 等，最多 12 个。

如何使用 CSS 按顺序扩展每个圆圈？此刻每个圆圈都从左上角同时扩大!

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

Answer 1

这是一个使用 4 个圆圈的示例。您所要做的就是添加一个 animation-delay，它等于前面的元素完成动画所需的时间量。因此，第一个圆应该没有动画延迟，第二个应该有 1s 延迟，第三个应该有 2s 延迟等等(因为每个循环的 animation-duration 是 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>

---

在上面的版本中，每个圆圈在前一个圆圈完成自己的动画后立即开始其动画。如果您需要在一个元素的动画完成到下一个元素的动画开始之间有 1 秒的延迟，那么只需增加 animation-delay，如下面的代码片段所示。

animation-delay 的计算逻辑非常简单。对于每个元素，

• animation-delay = (n-1) * (animation-duration + animation-delay)，其中 n 是其索引。

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