<div class="logo">
  <div class="square square1"></div>
  <div class="square square2"></div>
  <div class="square square2 square21"></div>
  <div class="square square3"></div>
</div>

.logo {
  top: 70px;
  left: 50%;
  position: absolute;
  transform: scale(4);
}

.square {
  width: 50px;
  height: 50px;
  position: absolute;
  background: black;
  transform: rotate(45deg);
  transform-origin: top left;

  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.05, .27, .28, 1);
}

.square1 {
  background: #EA585D;
  z-index: 2;
  animation-name: comeFromTop;
}

.square2 {
  background: linear-gradient(135deg, #EE4036, #262261);
  opacity: 0.58;
  top: 14px;
  z-index: 4;
  width: 40px;
  height: 40px;
  animation-name: growInCenter;
}

.square21 {
  background: #B05486;
  z-index: 3;
  animation-name: growInCenter;
}

.square3 {
  background: #181648;
  z-index: 1;
  animation-name: comeFromBottom;
}

@keyframes comeFromTop {
  0% {
    transform: translateY(-20px) rotate(45deg) scale(1.2);
  }
  
  80% {
    transform: translateY(10px) rotate(45deg) scale(1);
  }
  
  100% {
    transform: translateY(10px) rotate(45deg) scale(1);
  }
}

@keyframes growInCenter {
  0% {
    filter: blur(3px);
    opacity: 0.3;
    transform: translateY(26px) scale(0.45) rotate(45deg);
  }
  
  80% {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(6px) scale(1.075) rotate(45deg);
  }
  
  100% {
    opacity: 1;
    transform: translateY(6px) scale(1.075) rotate(45deg);
  }
}

@keyframes comeFromBottom {
  0% {
    transform: translateY(40px) rotate(45deg) scale(0.8);
  }
  
  80% {
    transform: translateY(20px) rotate(45deg) scale(1);
  }
  
  100% {
    transform: translateY(20px) rotate(45deg) scale(1);
  }
}