This forum is now read-only. Please use our new forums! Go to forums
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
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;
}
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!