* {
  box-sizing: border-box;
}

*:before, *:after {
  box-sizing: border-box;
}

.box {
  height: 200px;
  width: 200px;
  overflow: hidden;
  border-radius: 35px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -100px;
}
.box:after {
  position: relative;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 2000px;
  background: linear-gradient(135deg, #5335CF 0%, #DE005E 25%, #F66E48 50%, #DE005E 75%, #5335CF 100%);
  animation: animatebg 10s infinite linear;
}

@keyframes animatebg {
  0% {
    top: 0;
  }
  50% {
    top: -1800px;
  }
  100% {
    top: 0;
  }
}
.logo > div {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 9px #fff solid;
  z-index: 2;
}
.logo > div.logo-dot {
  border: 7px #fff solid;
  border-radius: 10em;
  right: 23%;
  top: 23%;
  left: auto;
}
.logo-border {
  margin-top: -37%;
  margin-left: -37%;
  border-radius: 10em;
  width: 74%;
  height: 74%;
}
.logo-circle {
  margin-top: -24%;
  margin-left: -24%;
  border-radius: 10em;
  width: 48%;
  height: 48%;
}

@keyframes animatebox {
  0% {
    transform: scale(0);
    border-radius: 35px;
  }
  2.5% {
    transform: scale(1.1);
    border-radius: 10em;
  }
  5% {
    transform: scale(1);
    border-radius: 35px;
  }
  96% {
    transform: scale(1);
    border-radius: 35px;
  }
  98% {
    transform: scale(1.1);
    border-radius: 10em;
  }
  100% {
    transform: scale(0);
  }
}

@keyframes animateborder {
  0% {
    border-radius: 10em;
    transform: scale(0);
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  18% {
    border-radius: 35px;
    transform: scale(1);
    opacity: 1;
  }
  90% {
    border-radius: 35px;
    transform: scale(1);
  }
}

@keyframes animatecircle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  5% {
    transform: scale(0);
    opacity: 0;
  }
  10% {
    transform: scale(1.3);
    opacity: 1;
  }
  15% {
    transform: scale(1);
  }
  95% {
    transform: scale(1);
    background-color: transparent;
  }
  97% {
    transform: scale(1.2);
    background-color: #ffffff;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animatedot {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.box {
  animation: animatebox 10s infinite alternate;
}

.logo-border {
  animation: animateborder 5s infinite alternate;
}

.logo-circle {
  animation: animatecircle 5s infinite alternate;
}

.logo-dot {
  animation: animatedot 5s infinite normal;
}