This forum is now read-only. Please use our new forums! Go to forums
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
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
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
1 comments
Thank you! That explains everything