This forum is now read-only. Please use our new forums! Go to forums
how to use the code from 6/7 to create other animations?
how can i use the following code to create more animations, also plz explain how this code works and what each property and selector does…..thanks! (NOTE: the code is from the project: Sun,Earth and Code at 6/7)
anyways.. here is the code:
@-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); } #earth-orbit { /* … 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; }
Answer 53f4183b631fe9a059000e5d
Definitions: Webkit - used to render (or load) the webpage on Safari and Chrome webpages. Moz - used to render (or load) the webpage on Mozilla Firefox webpages. o - used to render (or load) the webpage on Opera webpages. ms - Unfortunately I haven’t used this one myself, and am unable to tell you which browser it’s for. If anyone knows, please comment :)
Keyframes - With the @keyframes rule, you can create animations. The animation is created by gradually changing from one set of CSS styles to another. In this case, it’s getting the image it’s applied to to spin 360 degrees right, with the whole turn taking 10 seconds.
Using @-webkit-keyframes covers Chrome, Safari and Opera, while just @keyframes is the standard syntax.
For an example of different animations, see here: http://www.codecademy.com/javaWhiz66294/codebits/9UjORy
Hope this helped!
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