试试这个！！
FlexBox文件：https://www.w3schools.com/css/css3_flexbox.asp

.circle {
  border-radius: 100%;
  display: flex;
  transition: all 2s;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.circle.red {
  background-color: red;
}

.circle.blue {
  background-color: blue;
}

.circle.out {
  width: 200px;
  height: 200px;
}

.circle.in {
  width: 0px;
  height: 0px;
}

.circle.animate {
  animation-name: bigger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes bigger {
  from {
    width: 0;
    height: 0;
  }

  to {
    width: 100%;
    height: 100%;
  }
}

<div class="circle out red">
  <div class="circle in blue animate"></div>
</div>