themes/weex/source/css/animation.scss

.solar {
  margin: 250px auto 350px;
  height: 50px;
  width: 50px;
  background: orange;
  border-radius: 25px;
  position: relative;
  -webkit-animation: glow 1.5s linear infinite;
  -moz-animation: glow 1.5s linear infinite;
}

.solar i {
  border-radius: 250px;
  display: block;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
}

.solar i:before {
  content: '';
  border-radius: 25px;
  background: black;
  display: block;
  position: absolute;
  top: -5px;
  right: 45%;
}

.solar i.mercury {
  width: 80px;
  height: 80px;
  margin-left: -40px;
  left: 50%;
  top: 50%;
  margin-top: -40px;
  -webkit-animation: orbit .5s linear infinite;
  -moz-animation: orbit .5s linear infinite;
}

.solar i.mercury:before {
  background: #6F5F5F;
  height: 7px;
  width: 7px;
}

.solar i.venus {
  width: 110px;
  height: 110px;
  margin-left: -55px;
  left: 50%;
  top: 50%;
  margin-top: -55px;
  -webkit-animation: orbit 1s linear infinite;
  -moz-animation: orbit 1s linear infinite;
}

.solar i.venus:before {
  background: #E7A71F;
  height: 10px;
  width: 10px;
}

.solar i.earth {
  width: 140px;
  height: 140px;
  margin-left: -70px;
  left: 50%;
  top: 50%;
  margin-top: -70px;
  -webkit-animation: orbit 1.5s linear infinite;
  -moz-animation: orbit 1.5s linear infinite;
}

.solar i.earth:before {
  background: #63BEE2;
  height: 10px;
  width: 10px;
}

.solar i.mars {
  width: 170px;
  height: 170px;
  margin-left: -85px;
  left: 50%;
  top: 50%;
  margin-top: -85px;
  -webkit-animation: orbit 2s linear infinite;
  -moz-animation: orbit 2s linear infinite;
}

.solar i.mars:before {
  background: red;
  height: 10px;
  width: 10px;
}

.solar i.belt {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-width: 25px;
  width: 240px;
  height: 240px;
  margin-left: -120px;
  border-color: rgba(36, 35, 35, 0.21);
  left: 50%;
  top: 50%;
  margin-top: -120px;
}

.solar i.jupiter {
  width: 260px;
  height: 260px;
  margin-left: -130px;
  left: 50%;
  top: 50%;
  margin-top: -130px;
  -webkit-animation: orbit 2.5s linear infinite;
  -moz-animation: orbit 2.5s linear infinite;
}

.solar i.jupiter:before {
  background: #CF9B2B;
  top: -15px;
  height: 30px;
  width: 30px;
}

.solar i.saturn {
  width: 320px;
  height: 320px;
  margin-left: -160px;
  left: 50%;
  top: 50%;
  margin-top: -160px;
  -webkit-animation: orbit 3s linear infinite;
  -moz-animation: orbit 3s linear infinite;
}

.solar i.saturn:before {
  background: #CF7A2B;
  top: -10px;
  height: 20px;
  width: 20px;
}

.solar i.saturn:after {
  background: #fff;
  width: 30px;
  height: 1px;
  content: '';
  position: absolute;
  display: block;
  background: #FFF;
  width: 30px;
  height: 1px;
  content: '';
  right: 43.5%;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
}

.solar i.uranus {
  width: 360px;
  height: 360px;
  margin-left: -180px;
  left: 50%;
  top: 50%;
  margin-top: -180px;
  -webkit-animation: orbit 3.5s linear infinite;
  -moz-animation: orbit 3.5s linear infinite;
}

.solar i.uranus:before {
  background: #10C593;
  top: -8px;
  height: 15px;
  width: 15px;
}

.solar i.neptune {
  width: 400px;
  height: 400px;
  margin-left: -200px;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  -webkit-animation: orbit 4s linear infinite;
  -moz-animation: orbit 4s linear infinite;
}

.solar i.neptune:before {
  background: #1470E4;
  top: -8px;
  height: 15px;
  width: 15px;
}

@-webkit-keyframes orbit {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-180deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@-webkit-keyframes glow {
  0% {
    box-shadow: none;
  }
  50% {
    background: #FFEB00;
    box-shadow: 0 0 20px orange;
  }
  100% {
    box-shadow: none;
  }
}

@-moz-keyframes orbit {
  0% {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(-180deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
  }
}

@-moz-keyframes glow {
  0% {
    box-shadow: none;
  }
  50% {
    background: #FFEB00;
    box-shadow: 0 0 20px orange;
  }
  100% {
    box-shadow: none;
  }
}