This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Sun, Earth, and Code Forum

View Course » View Exercise

510 points
Picture
Submitted by
carltonrobot
about 2 years ago

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!


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;

}

127 points
E12a51ce41c573135a4db3ac1a751882?s=140&d=retro
Submitted by
Chelsea
almost 2 years ago

1 Comment

Picture carltonrobot almost 2 years ago

thank you!