.planet {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  z-index: 2;
  position: absolute;

  -webkit-clip-path: circle(50px at center);
  clip-path: circle(50px, 50px, 50px);
  clip-path: circle(50px at center);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: rgb(183, 0, 255);
  overflow: hidden;
  transform: scale(2);
}
.planet:before,
.planet:after {
  border-radius: 50%;
  content: '';
  position: absolute;
  top: -4%;
  left: -4%;
  height: 108%;
  width: 108%;
}
.planet:before {
  background: #000000;
  -moz-box-shadow: inset -10px 0 7px 0px rgb(183, 0, 255);
  -webkit-box-shadow: inset -10px 0 7px 0px rgb(183, 0, 255);
  box-shadow: inset -10px 0 7px 0px rgb(183, 0, 255);
}
.planet:after {
  background: rgba(197, 94, 94, 0.61);
  -moz-box-shadow: inset -10px 0 7px 0px rgb(183, 0, 255);
  -webkit-box-shadow: inset -10px 0 7px 0px rgb(183, 0, 255);
  box-shadow: inset -10px 0 7px 0px rgb(183, 0, 255);
}

/* Animation */
@keyframes before-fullplanet {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
  0%,
  24.99% {
    background: #000000;
  }
  25%,
  100% {
    background: rgb(183, 0, 255);
  }
  0% {
    -moz-box-shadow: inset 0px 0 7px 0px rgb(183, 0, 255);
    -webkit-box-shadow: inset 0px 0 7px 0px rgb(183, 0, 255);
    box-shadow: inset 0px 0 7px 0px rgb(183, 0, 255);
  }
  24.99% {
    -moz-box-shadow: inset 55px 0 7px 0px rgb(183, 0, 255);
    -webkit-box-shadow: inset 55px 0 7px 0px rgb(183, 0, 255);
    box-shadow: inset 55px 0 7px 0px rgb(183, 0, 255);
  }
  25% {
    -moz-box-shadow: inset 55px 0 7px 0px #000000;
    -webkit-box-shadow: inset 55px 0 7px 0px #000000;
    box-shadow: inset 55px 0 7px 0px #000000;
  }
  50%,
  100% {
    -moz-box-shadow: inset 0 0 7px 0px #000000;
    -webkit-box-shadow: inset 0 0 7px 0px #000000;
    box-shadow: inset 0 0 7px 0px #000000;
  }
  0%,
  50%,
  100% {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
  20%,
  30% {
    -moz-border-radius: 10% 10% 10% 10%/50% 50% 50% 50%;
    -webkit-border-radius: 10%;
    border-radius: 10% 10% 10% 10%/50% 50% 50% 50%;
  }
  25% {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  0%,
  24.99% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  25%,
  50%,
  100% {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes after-fullplanet {
  0%,
  50% {
    opacity: 0;
  }
  50.01%,
  100% {
    opacity: 1;
  }
  0%,
  50%,
  74.99% {
    background: rgb(183, 0, 255);
  }
  75%,
  100% {
    background: #000000;
  }
  0%,
  50% {
    -moz-box-shadow: inset 0px 0 7px 0px #000000;
    -webkit-box-shadow: inset 0px 0 7px 0px #000000;
    box-shadow: inset 0px 0 7px 0px #000000;
  }
  74.99% {
    -moz-box-shadow: inset 55px 0 7px 0px #000000;
    -webkit-box-shadow: inset 55px 0 7px 0px #000000;
    box-shadow: inset 55px 0 7px 0px #000000;
  }
  75% {
    -moz-box-shadow: inset 55px 0 7px 0px rgb(183, 0, 255);
    -webkit-box-shadow: inset 55px 0 7px 0px rgb(183, 0, 255);
    box-shadow: inset 55px 0 7px 0px rgb(183, 0, 255);
  }
  100% {
    -moz-box-shadow: inset 0 0 7px 0px rgb(183, 0, 255);
    -webkit-box-shadow: inset 0 0 7px 0px rgb(183, 0, 255);
    box-shadow: inset 0 0 7px 0px rgb(183, 0, 255);
  }
  0%,
  50%,
  100% {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
  70%,
  80% {
    -moz-border-radius: 10% 10% 10% 10%/50% 50% 50% 50%;
    -webkit-border-radius: 10%;
    border-radius: 10% 10% 10% 10%/50% 50% 50% 50%;
  }
  75% {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  0%,
  50%,
  74.99% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  75%,
  100% {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
.planet:before {
  -moz-animation: before-fullplanet linear 5s infinite;
  -webkit-animation: before-fullplanet linear 5s infinite;
  animation: before-fullplanet linear 5s infinite;
}
.planet:after {
  -moz-animation: after-fullplanet linear 5s infinite;
  -webkit-animation: after-fullplanet linear 5s infinite;
  animation: after-fullplanet linear 5s infinite;
}