Ajax-loader-large-white
Sun, Earth, and Code
Spin please

Now that Earth is on its orbit. Lets make the orbit spin.

This looks complicated at first; however, you'll get used to the syntax with practice.

Instructions

01.
Copy the following to the very bottom of your style.css file. These will specify a custom css animation!

@-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);
  }
}

02.
Next, in your #earth-orbit block, add the animation lines to the bottom or your #earth-orbit style block.

#earth-orbit {
   /* ... your other orbit styles ... */

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

This change applies your custom animation to your earth's orbit. It will rotate your orbit 360 degrees continuously.

index.html
style.css
project
View Preview