相关疑难解决方法(0)

我有一个圆圈的钟面,我希望在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 …