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

Sun, Earth, and Code Forum

View Course » View Exercise

600 points
539f2bbb8c1ccc6b240004c9_778188940
Submitted by
Faiq Nadeem
over 3 years ago

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


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!

679 points
56dfb960f7a9649c2100017c_463675295
Submitted by
Daytona
over 3 years ago