test box anumation

this is to test the box animation.(trying https://loading.io/spinner/square/)

by Vikas

HTML

<div class='parent'>


<div id="boxes">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

</div>

CSS

.parent {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, 50%);
}

#boxes {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: expandd 1s linear infinite, spin1 2s linear infinite
}

#boxes span {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #f00 ;
  animation: contract 1s linear infinite;
  
}

#boxes span:nth-child(1) {
  top: 0;
  left: 0;
  background-color: green;
  transform: translate(-50%, -50%);
  margin: 25px;
}

#boxes span:nth-child(2) {
  top: 0;
  right: 0;
  background-color: blue;
  transform: translate(50%, -50%);
  margin: 25px;
}

#boxes span:nth-child(3) {
  bottom: 0;
  left: 0;
  background-color: pink;
  transform: translate(-50%, 50%);
   margin: 25px;
}

#boxes span:nth-child(4) {
  bottom: 50%;
  left: 0;
  background-color: darkslategray;
  transform: translate(-50%, 50%);
  margin-left: 25px;
}

#boxes span:nth-child(5) {
  bottom: 50%;
  right: 0;
  background-color: maroon;
  transform: translate(50%, 50%);
  margin-right: 25px;
}

#boxes span:nth-child(6) {
  bottom: 50%;
  left: 50%;
  background-color: deeppink;
  transform: translate(-50%, 50%);
}

#boxes span:nth-child(7) {
  bottom: 0;
  right: 0;
  background-color: black;
  transform: translate(50%, 50%);
  margin: 25px
}

#boxes span:nth-child(8) {
  left: 50%;
  background-color: red;
  transform: translate(-50%, -50%);
  margin-top: 25px;
}

#boxes span:nth-child(9) {
  bottom: 0;
  left: 50%;
  background-color: cyan;
  transform: translate(-50%, 50%);
  margin-bottom: 25px;
}

@keyframes contract {
  0% {
    width: 50px;
    height: 50px
  }
  10% {
    width: 40px;
    height: 40px
  }
  50% {
    width: 25px;
    height: 25px
  }
  90% {
    width: 50px;
    height: 50px
  }
  100% {
    width: 50px;
    height: 50px
  }
}

@keyframes expand {
  0% {
    width: 130px;
    height: 130px
  }
  10% {
    width: 115px;
    height: 115px
  }
 ...