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

Sun, Earth, and Code Forum

View Course » View Exercise

968 points
34ad297397cf30c906cfc7c9cc6d58ca?s=140&d=retro
Submitted by
acdelrusso
about 3 years ago

What exactly are these blocks of animation code?

What exactly are
@-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);
}
}

AS WELL AS

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

Where would I get these two pieces of code? How would I know to use these?


3 votes

permalink

each line does essentially the same thing, but the line used depends on which browser you are using. W3Schools says that Opera,Chrome, and Safari use Webkit, IE9 uses ms, etc. So if you are using chrome, the only important lines are the webkit lines. Now, "webkit-animation: spin-right 10s linear infinite;" says to take the animation function called "spin-right", run the full animation in to completion every 10 seconds (duration) with a linear timing function and infinite delay (dont worry too much about the second two parameters). You could achieve the same thing by listing out each property one-by-one, for example:
div{
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
}

What does "spin-right" do? Spin-Right says to call the built in function transform. Transform has various properties, such as translate, rotate, skew, scale, etc. By saying rotate(360), we are saying that from the start of the animation to the end (10s), we want the earth-orbit (html item calling the spin-right function) to rotate 360 degs. Not only is the earth spinning, but the circle representing the earth's orbit is too, we just can't see it.

Check out http://www.w3schools.com/css/css3_animations.asp
and http://www.w3schools.com/cssref/css3_pr_transform.asp for more info

Hope this helps

1018 points
1c7de9a6c7991812a147b6b26b610d7a?s=140&d=retro
Submitted by
Fatbagthesuper
almost 3 years ago

1 Comment

11aa1cee0c60e6d7634fb33a43246561?s=140&d=retro kodasani almost 3 years ago

Although you have explained it almost clearly but i still have no idea about "-webkits" and the rest of the code being used ??pls help me