使用CSS逐个扩展圆圈

Question

我有一个由圆圈组成的时钟表盘，希望它们按顺序每秒钟出现一个，第一个从零开始变大到完整大小，然后再过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;
}

- Rob

---

这很复杂，但你需要为每个设置不同的动画延迟。这种事情最好交给JS处理。 - Paulie_D

我不是很理解问题。你的意思是同一个 a 标签会根据计数器而获得不同的类名 (1-12)？ - Harry

@Harry 抱歉有点混淆...不，它们将会有12个。 - Rob

Answer 1

这是一个使用4个圆圈的示例。您需要添加一个等同于前面元素完成动画所需时间的“animation-delay”。因此，第一个圆圈不应有动画延迟，第二个应该有1秒的延迟，第三个应该有2秒的延迟，以此类推（因为每个周期的“animation-duration”为1秒）。请注意不要删除任何HTML标签。

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

- Harry

---

完美。正如我要建议的那样。 - Paulie_D