body {
  background-color: #fff;
}

.test {
  width: 10px;
  height: 10px;
  background-color: #64b6ac;
  border-radius: 10rem;
  /* animation-name: grow;
  animation-duration: 2.2s; */

  animation: grow 1s ease;
  animation-iteration-count: infinite;

  /* animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: 0;
  animation-play-state: running;
  animation-fill-mode: forwards; */
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.circle-container {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
  /* border: solid 5px tomato; */
}
.circle-container > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3em;
  width: 10px;
  height: 10px;
  background-color: red;
}
.circle-container > *:nth-of-type(1) {
  -webkit-transform: rotate(0deg) translate(10em) rotate(0deg);
  transform: rotate(0deg) translate(10em) rotate(0deg);
}
.circle-container > *:nth-of-type(2) {
  -webkit-transform: rotate(12deg) translate(10em) rotate(-12deg);
  transform: rotate(12deg) translate(10em) rotate(-12deg);
}
.circle-container > *:nth-of-type(3) {
  -webkit-transform: rotate(24deg) translate(10em) rotate(-24deg);
  transform: rotate(24deg) translate(10em) rotate(-24deg);
}
.circle-container > *:nth-of-type(4) {
  -webkit-transform: rotate(36deg) translate(10em) rotate(-36deg);
  transform: rotate(36deg) translate(10em) rotate(-36deg);
}
.circle-container > *:nth-of-type(5) {
  -webkit-transform: rotate(48deg) translate(10em) rotate(-48deg);
  transform: rotate(48deg) translate(10em) rotate(-48deg);
}
.circle-container > *:nth-of-type(6) {
  -webkit-transform: rotate(60deg) translate(10em) rotate(-60deg);
  transform: rotate(60deg) translate(10em) rotate(-60deg);
}
.circle-container > *:nth-of-type(7) {
  -webkit-transform: rotate(72deg) translate(10em) rotate(-72deg);
  transform: rotate(72deg) translate(10em) rotate(-72deg);
}
.circle-container > *:nth-of-type(8) {
  -webkit-transform: rotate(84deg) translate(10em) rotate(-84deg);
  transform: rotate(84deg) translate(10em) rotate(-84deg);
}
.circle-container > *:nth-of-type(9) {
  -webkit-transform: rotate(96deg) translate(10em) rotate(-96deg);
  transform: rotate(96deg) translate(10em) rotate(-96deg);
}
.circle-container > *:nth-of-type(10) {
  -webkit-transform: rotate(108deg) translate(10em) rotate(-108deg);
  transform: rotate(108deg) translate(10em) rotate(-108deg);
}
.circle-container > *:nth-of-type(11) {
  -webkit-transform: rotate(120deg) translate(10em) rotate(-120deg);
  transform: rotate(120deg) translate(10em) rotate(-120deg);
}
.circle-container > *:nth-of-type(12) {
  -webkit-transform: rotate(132deg) translate(10em) rotate(-132deg);
  transform: rotate(132deg) translate(10em) rotate(-132deg);
}
.circle-container > *:nth-of-type(13) {
  -webkit-transform: rotate(144deg) translate(10em) rotate(-144deg);
  transform: rotate(144deg) translate(10em) rotate(-144deg);
}
.circle-container > *:nth-of-type(14) {
  -webkit-transform: rotate(156deg) translate(10em) rotate(-156deg);
  transform: rotate(156deg) translate(10em) rotate(-156deg);
}
.circle-container > *:nth-of-type(15) {
  -webkit-transform: rotate(168deg) translate(10em) rotate(-168deg);
  transform: rotate(168deg) translate(10em) rotate(-168deg);
}
.circle-container > *:nth-of-type(16) {
  -webkit-transform: rotate(180deg) translate(10em) rotate(-180deg);
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.circle-container > *:nth-of-type(17) {
  -webkit-transform: rotate(192deg) translate(10em) rotate(-192deg);
  transform: rotate(192deg) translate(10em) rotate(-192deg);
}
.circle-container > *:nth-of-type(18) {
  -webkit-transform: rotate(204deg) translate(10em) rotate(-204deg);
  transform: rotate(204deg) translate(10em) rotate(-204deg);
}
.circle-container > *:nth-of-type(19) {
  -webkit-transform: rotate(216deg) translate(10em) rotate(-216deg);
  transform: rotate(216deg) translate(10em) rotate(-216deg);
}
.circle-container > *:nth-of-type(20) {
  -webkit-transform: rotate(228deg) translate(10em) rotate(-228deg);
  transform: rotate(228deg) translate(10em) rotate(-228deg);
}
.circle-container > *:nth-of-type(21) {
  -webkit-transform: rotate(240deg) translate(10em) rotate(-240deg);
  transform: rotate(240deg) translate(10em) rotate(-240deg);
}
.circle-container > *:nth-of-type(22) {
  -webkit-transform: rotate(252deg) translate(10em) rotate(-252deg);
  transform: rotate(252deg) translate(10em) rotate(-252deg);
}
.circle-container > *:nth-of-type(23) {
  -webkit-transform: rotate(264deg) translate(10em) rotate(-264deg);
  transform: rotate(264deg) translate(10em) rotate(-264deg);
}
.circle-container > *:nth-of-type(24) {
  -webkit-transform: rotate(276deg) translate(10em) rotate(-276deg);
  transform: rotate(276deg) translate(10em) rotate(-276deg);
}
.circle-container > *:nth-of-type(25) {
  -webkit-transform: rotate(288deg) translate(10em) rotate(-288deg);
  transform: rotate(288deg) translate(10em) rotate(-288deg);
}
.circle-container > *:nth-of-type(26) {
  -webkit-transform: rotate(300deg) translate(10em) rotate(-300deg);
  transform: rotate(300deg) translate(10em) rotate(-300deg);
}
.circle-container > *:nth-of-type(27) {
  -webkit-transform: rotate(312deg) translate(10em) rotate(-312deg);
  transform: rotate(312deg) translate(10em) rotate(-312deg);
}
.circle-container > *:nth-of-type(28) {
  -webkit-transform: rotate(324deg) translate(10em) rotate(-324deg);
  transform: rotate(324deg) translate(10em) rotate(-324deg);
}
.circle-container > *:nth-of-type(29) {
  -webkit-transform: rotate(336deg) translate(10em) rotate(-336deg);
  transform: rotate(336deg) translate(10em) rotate(-336deg);
}
.circle-container > *:nth-of-type(30) {
  -webkit-transform: rotate(348deg) translate(10em) rotate(-348deg);
  transform: rotate(348deg) translate(10em) rotate(-348deg);
}
.circle-container * {
  display: block;
  max-width: 100%;
  border-radius: 50%;
  transition: 0.15s;
  width: 10px;
  height: 10px;
  background-color: #64b6ac;
  /* animation: grow 1s ease;
  animation-iteration-count: infinite; */
}