Squres Infinite Loop

HTML

<div class="base">
  <div class="pink"></div>
  <div class="salmon"></div>
  <div class="blue"></div>
  <div class="bluesky"></div>
</div>

CSS

body {
  background-color: #eee7df;
}
body .base {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .base .bluesky,
body .base .blue,
body .base .salmon,
body .base .pink {
  border-radius: 4px;
  position: absolute;
  -webkit-animation: ruota 3s ease-in-out infinite alternate;
  animation: ruota 3s ease-in-out infinite alternate;
}
body .base .bluesky {
  width: 35vw;
  height: 35vw;
  z-index: 4;
  border: 2vw solid #7e549f;
}
body .base .blue {
  width: 25vw;
  height: 25vw;
  z-index: 5;
  border: 2vw solid #c1549c;
}
body .base .salmon {
  width: 15vw;
  height: 15vw;
  z-index: 6;
  border: 2vw solid #fb836f;
}
body .base .pink {
  width: 5vw;
  height: 5vw;
  z-index: 7;
  border: 2vw solid #ffcb3e;
}

@keyframes ruota {
  0%,100% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@-webkit-keyframes ruota {
  0%,100% {
    -webkit-transform: rotate3d(1, 1, 1, 0deg);
  }
  50% {
    -webkit-transform: rotate3d(1, 1, 1, 360deg);
  }
}
.base div:nth-child(0) {
  animation-delay: 0s;
}

.base div:nth-child(1) {
  animation-delay: 0.15s;
}

.base div:nth-child(2) {
  animation-delay: 0.3s;
}

.base div:nth-child(3) {
  animation-delay: 0.45s;
}

.base div:nth-child(4) {
  animation-delay: 0.6s;
}

Preview