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

Sun, Earth, and Code Forum

View Course » View Exercise

248 points
519a21821587e8cab3003030_337732662
Submitted by
77khondamir
over 3 years ago

I can't get the spin to work on my program.

I put in:

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

}

#sun {
position: absolute;
top: 50%;
left: 50%;

height: 200px;
width: 200px;
margin-top: -100px; 
margin-left: -100px;

border-color: orange;

border-style: solid;
border-radius: 50%;

box-shadow: 0 0 128px red;

}


<!-- Right below is an image of the sun -->

    <!-- Insert the 'earth' on the next line -->
    <div id='earth-orbit'>
    <img id="earth" src="http://goo.gl/o3YWu9">
    </div> 
</body>

}
}

on my program, but it just keeps saying "Oops, try again. Add the animation code from the instructions to the "style.css" tab."- even though I did.


2 votes

permalink

first, the ' { ' and ' } ' should only be seen on the css,not html. And in your question here, you mix them up.

<!-- Right below is an image of the sun -->
<!-- Insert the 'earth' on the next line -->




}
}

maybe is not what you did your your page, but confuses in your question.

second, the reason you got the wrong result is you misunderstand the instructins.
I'd show the right code below and tell you why.

The right code:

html, body {
/* The universe takes up all available space */
width: 100%;
height: 100%;

/* The universe is black */
background-color: black;

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

#sun {
position: absolute;
top: 50%;
left: 50%;

height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;

border-color: orange;

border-style: solid;
border-radius: 50%;

box-shadow: 0 0 128px red;
}

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

You html is right.

And WHY?

The instructions said

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

OK? The ' @ ' started two parts of codes are on the bottom of your css!
Not the bottom of #earth-orbit .

Try again, you'll get it right.

574 points
52a48df07c82ca6d2b004120_821532739
Submitted by
李嘉文
over 3 years ago

1 Comment

519a21821587e8cab3003030_337732662 77khondamir over 3 years ago

Oh i see where i went wrong. Thx for the help