使用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相当于前面元素完成动画所需的时间量.因此,第一个圆圈应该没有动画延迟,第二个应该有1秒延迟,第三个应该有2秒延迟等等(因为animation-duration每个周期为1 秒).

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