This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by megadime
almost 9 years

Orbit disappeared on the last step!

Although everything was ok and my code was good to go, at the last step the earth orbit disappeared and the spin code does nothing. I can only see the sun now…

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
    
    /* The universe is black */
    background-color: black;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
    border-color: orange;
    border-width: 8px;
    border-style: solid;
    border-radius: 50%;
    box-shadow: 0 0 128px red;
  
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px; 
    margin-left: -100px;
}

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

#earth-orbit {
    position: absolute;
    top: 50%;
    left: 50%
    width: 500px;
    height: 500px;
    margin-top: -250px;
    margin-left: -250px;
    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
}@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
              /* ... 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;
  }
}

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

Answer 552a1f1686f55275d200015a

1 vote

Permalink

You dont have the animation code in #earth-orbit. The definition below is just defining a type of animation, that you can use several times in your code. It repeated because -webkit- is for chrome, and the normal one is for other browsers. You need to add the following code to #earth-orbit:

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

Each one of these lines does the same thing but for a different browser. spin-right is a reference to the animation type you declared at the end of the file. 60s is the duration of the animation, this is how you control the spinning speed. linear causes the animation to go at a fixed speed (doesnt slow down/speed up mid-turn). infinite makes the animation go on forever, so it doesnt stop after one turn.

TL;DR: Add the code above to #earth-orbit

points
Submitted by ‫michael‬‏ e
almost 9 years

1 comments

megadime almost 9 years

Thank you! That explains everything