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

0 points
Submitted by carltonrobot
almost 9 years

Can someone please explain how to make the otehr planets orbit?

I would really love to add in more animation for my other planets but I don’t know how. The animation isn’t explained, we’re just told to copy paste it. My Earth is orbiting just fine, but what do I have to do to get the other planets to orbit too? Here’s what I tried for my mercury id:

#mercury-orbit { position: absolute; top: 40%; width: 250px; height: 250px; margin-top: -100px; margin-left: -100px; border-width: 2px; border-style: dotted; border-color: white; border-radius: 50%;

 -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;

}

Do I need to put in the

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

again? and if so, where?

Thanks for any help!

Answer 5589b2a8937676a3b00004dc

0 votes

Permalink

You left out some things so here’s what I put for my mercury. You can change the amounts as much as you want. And you do not need to put the whole ‘@-webkit-keyframes thing because you already put it for all of your planets.

#mercury { position:absolute top: 0%; left: 50%;

  height: 30px;
width: 30px;
margin-left: 30px;
margin-top: 30px;
  
  border-color: grey;
border-width: 0px;
border-style: solid;
border-radius: 50%;

box-shadow: 0 0 128px white;

}

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

width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;

border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 5s linear infinite;
 -moz-animation: spin-right 5s linear infinite;
  -ms-animation: spin-right 5s linear infinite;
   -o-animation: spin-right 5s linear infinite;
      animation: spin-right 5s linear infinite;

}

points
Submitted by Chelsea
almost 9 years

1 comments

carltonrobot almost 9 years

thank you!