CSS for Solar System Animation.

SolarSystem.CSS

html, body {

    background-color: #000000;
}

#sun {
    position: absolute;
    top: 50%;
    left: 50%;

    height: 100px;
    width: 100px;
    margin-top: -50px; 
    margin-left: -50px;
    border-color: orange;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    position:absolute;
    box-shadow: 0 0 125px orange;
}

#mercury {
    Width: 30px;
    Height: auto;
}

#mercury-orbit {
    Height: 360px;
    Width: 360px;

    position:absolute;
    top:50%;
    left:50%;
    margin-top:-180px;
    margin-left:-180px;
    
  -webkit-animation: spin-right 1s linear infinite;
     -moz-animation: spin-right 1s linear infinite;
      -ms-animation: spin-right 1s linear infinite;
       -o-animation: spin-right 1s linear infinite;
          animation: spin-right 1s linear infinite;
}

#venus {
    width:75px;
    height:auto;
}

#venus-orbit {
    Height: 672px;
    Width: 672px;

    position:absolute;
    top:50%;
    left:50%;
    margin-top:-336px;
    margin-left:-336px;
    
  -webkit-animation: spin-right 2.55s linear infinite;
     -moz-animation: spin-right 2.55s linear infinite;
      -ms-animation: spin-right 2.55s linear infinite;
       -o-animation: spin-right 2.55s linear infinite;
          animation: spin-right 2.55s linear infinite;
}

#earth {

    width: 79px;
    height:auto;
    top:0;
    left:50%;
    
    border-color: blue;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    box-shadow: 0 0 30px blue;
}

#earth-orbit {
    
    position: absolute;
    top: 50%;
    left: 50%;

    width: 930px;
    height: 930px;
    margin-left:-465px;
    margin-top:-465px;

  -webkit-animation: spin-right 4.15s linear infinite;
     -moz-animation: spin-right 4.15s linear infinite;
      -ms-animation: spin-right 4.15s linear infinite;
       -o-animation: spin-right 4.15s linear infinite;
          animation: spin-right 4.15s linear infinite;
}

#mars {

    width: 42px;
    height: auto;
    position: absolute;
    top:50;
    left:50%;
}

#mars-orbit {
    
    position: absolute;
    top: 50%;
    left: 50%;

    width: 1416px;
    height: 1416px;
    margin-left:-708px;
    margin-top:-708px;

  -webkit-animation: spin-right 7.80s linear infinite;
     -moz-animation: spin-right 7.80s linear infinite;
      -ms-animation: spin-right 7.80s linear infinite;
       -o-animation: spin-right 7.80s linear infinite;
          animation: spin-right 7.80s linear infinite;          
}

#jupiter{

    width:888px;
    height:auto;
    
}

#jupiter-orbit{
    
    position: absolute;
    top: 50%;
    left: 50%;

    width: 4838px;
    height: 4838px;
    margin-left:-2419px;
    margin-top:-2419px;
    
    
  -webkit-animation: spin-right 50s linear infinite;
     -moz-animation: spin-right 50s linear infinite;
      -ms-animation: spin-right 50s linear infinite;
       -o-animation: spin-right 50s linear infinite;
          animation: spin-right 50s linear infinite;
}

#saturn {

    width: 748px;
    height: auto;
    margin-left:-274px;
    margin-top:-274px;
    position:absolute;
    top:0;
    left:50%;
}

#saturn-orbit {
    
    position: absolute;
    top: 50%;
    left: 50%;

    width: 8908px;
    height: 8908px;
    margin-left:-4454px;
    margin-top:-4454px;

  -webkit-animation: spin-right 122.125s linear infinite;
     -moz-animation: spin-right 122.125s linear infinite;
      -ms-animation: spin-right 122.125s linear infinite;
       -o-animation: spin-right 122.125s linear infinite;
          animation: spin-right 122.125s linear infinite;
          
}

#uranus {

    width: 317px;
    height: auto;
    margin-left:-25px;
    margin-top:-25px;
    position:absolute;
    top:50;
    left:50%;
}

#uranus-orbit{
    
    position: absolute;
    top: 50%;
    left: 50%;

    width: 17848px;
    height: 17848px;
    margin-left:-8924px;
    margin-top:-8924px;
    
    
  -webkit-animation: spin-right 347.6s linear infinite;
     -moz-animation: spin-right 347.6s linear infinite;
      -ms-animation: spin-right 347.6s linear infinite;
       -o-animation: spin-right 347.6s linear infinite;
          animation: spin-right 347.6s linear infinite;
}

#neptune {

    height: 307px;
    width: auto;
    margin-left:-25px;
    margin-top:-25px;
    position:absolute;
    top:0;
    left:50%;
}

#neptune-orbit{

    width: 800px;
    height: 800px;
    margin-left:-400px;
    margin-top:-400px;
    position: absolute;
    top: 50%;
    left: 50%;
    
    
  -webkit-animation: spin-right 679.54s linear infinite;
     -moz-animation: spin-right 679.54s linear infinite;
      -ms-animation: spin-right 679.54s linear infinite;
       -o-animation: spin-right 679.54s linear infinite;
          animation: spin-right 679.54s linear infinite;

}

#pluto{
    width:1;
    height:auto;
    margin-left:-25px;
    margin-top:-25px;
    position:absolute;
    top:0;
    left:50%;
}

#pluto-orbit{
    width: 800px;
    height: 800px;
    margin-left:-400px;
    margin-top:-400px;
    position: absolute;
    top: 50%;
    left: 50%;
    
    
  -webkit-animation: spin-right 1029.1s linear infinite;
     -moz-animation: spin-right 1029.1s linear infinite;
      -ms-animation: spin-right 1029.1s linear infinite;
       -o-animation: spin-right 1029.1s linear infinite;
          animation: spin-right 1029.1s linear infinite;
}


//-----------------------------------------------------------------


@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg); 
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}