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

Sun, Earth, and Code Forum

View Course » View Exercise

687 points
5b55815f9f481d53b03d566c192a0dc6?s=140&d=retro
Submitted by
hhembree89
over 3 years ago

Animation won't work, and the dotted orbit is still visible.

I entered the code exactly as instructed and have reviewed it over and over. I can't find why my earth is not moving. The dotted orbit is also visible, but I'm not sure if it's supposed to be invisible. I just want my earth to move around the sun.

Here is my code:

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: 2px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 64px orange;

/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px; 
margin-left: -100px;

}

#earth {
/* Style your earth */
position: absolute;
top: 0;
left: 50%;
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
border-color: blue;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 64px green;
}

#earth-orbit {
/* For Section #2 */
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-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;

}

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

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


0 votes

permalink

Hi, your code is working for me. What browser are you using?

2818 points
5674c6dae39efec455000434_879409444
Submitted by
Zeke Y
almost 3 years ago