Animations

Colouring elements is quite cool, but animating them… whooaaa, a whole new level. We can do things like the cool kids.

Before we dig in a bit deeper we should have in mind that there are 2 types of animations. One is made by CSS 3 and one by JavaScript. Now don’t get scared or intimidated by the “3”. There is nothing different from CSS 1 and CSS 2 (which did not really exist). The 3 means that some new attributes have been added and the browsers know what to do with them.
Do you remember how in the first lesson we were saying that the browser is stupid. Well, payback time, the browser is not THAT stupid. The browser knows how to read the CSS, link it to HTML and draw everything on the screen but since different companies create

Basic difference between the two comes in terms of what the browser knows what do with that bit of code.

JavaScript animations:

Are drawn much better in the same way on all the browsers

Can have more advanced way of controlling the animation

Slightly slower then CSS

CSS 3 animations:

Can look slightly different on a browser or another

Simple to use, very good for buttons or things that don’t move away

Faster then JavaScript

Now that we know about the differences next time we will learn a bit about JavaScript animations.