一点から内側から複数の円が広がるアニメーション

HTML

<div class="h_field">

  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>
  <div class="h_node"></div>

  <script type="text/javascript">
    var item_num = document.getElementsByClassName("h_node").length;
    var deg = 360.0/item_num;
    var red = (deg*Math.PI/180.0);
    var circle_r = 350;
    var center_x = 425;
    var center_y = 425;
  
    window.onload = function(){
      var nodes = document.getElementsByClassName('h_node');
      for(i=0;i<item_num;i++){
        var x = Math.cos(red * i - Math.PI/2) * circle_r+center_x;
        var y = Math.sin(red * i - Math.PI/2) * circle_r+center_y;
        nodes[i].style.left = x+"px";
        nodes[i].style.top = y+"px";
      }
    }
  </script>
  
  <div class="h_node_0"></div>

CSS

HTML CSSResult Skip Results Iframe
EDIT ON
.h_field{
  background-color: #fff;
  position: relative;
  width: 1000px;
  height: 1000px;
  left: 50%;
  transform: translateX(-50%);
}

.h_field > .h_node_0{
  color: #fff;
  background-color:#0ff;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
  line-height: 200px;
  text-align: center;
  border-radius: 50%;
}

.h_field > .h_node{
  color: #fff;
  background-color:#00f;
  width: 150px;
  height: 150px;
  position: absolute;
  left: 425px;
  top: 425px;
  line-height: 150px;
  text-align: center;
  border-radius: 50%;
  transition: left 1s, top 1s;
}

動作

See the Pen expanding circle by Reiji Kobayashi (@rk1004) on CodePen.