Where does the animation part of the Sun,Earth, and orbit code come from?


#1

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

Is this code we used part of css or is it from a third party website?
If I wanted to build something similar can I do everything from notepad++, or would be required to download some type of extension pack


#2

Hi Obarodi,

Animations are possible in pure CSS, thanks to HTML5!
Those aren't an extension or plugin or (pre/post)processor or anything, just native CSS, and you can use them anywhere :slightly_smiling:


#3

@zystvan

Is there somewhere you can look different animations up?
@obarodi
Can you post code with backticks like this?

```
place code here!
```

#4

@printcoder_eric Do you mean syntax, or actual animation? Because you create the animation. You could look through some place like CodePen for peoples' CSS animations, but really you just need to know the syntax and the properties you want to change and it's pretty easy :slightly_smiling:


#5

@zystvan

Ok, basically what you have to type in the code editor.


#6

@printcoder_eric A quick search found me these, they both look pretty helpful:


#7

It's the @keyframes part that makes the animations.
In the CSS file, there is this section of code at the bottom:

It reads this:
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

-webkit-transform, -moz-transform, -ms-transform, and -o-transform are just for browser compatability, which leaves us with this:
@keyframes spin-right {
100% {
transform: rotate(360deg);
}
}

  • @keyframes declares the animation (like var in JS)
  • spin-right is the name of the animation

Then there's:
100% {
transform: rotate(360deg);
}

  • 100% means "when the animation is done"
  • 360 degrees is a circle

Basically, it means "when the animation's done the element should have rotated 360 degrees."

That's the animation.
When you insert it into an element's style, the element receives the animation.
animation: spin-right 10s linear infinite;

You can do this in CSS, without any 3rd party website. Just write the same thing in a CSS file or between <style> tags.

Here are some reference links:
http://www.w3schools.com/css/css3_animations.asp [W3Schools CSS3 Animations]
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations [Using CSS animations - CSS | MDN]


#8