This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Faiq Nadeem
over 9 years

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

1 vote

Permalink

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!

points
Submitted by Daytona
over 9 years