# CSS Animations

How it works:

![image](http://www.phpied.com/files/reflow/render.png 'Source: Rendering: repaint, reflow/relayout, restyle')
*Source: [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)*
## TIPS
Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.

* top
* left
* right
* bottom
* margin-*

Instead use the transform property and the translate(), translateX(), and translateY() function.

### Code examples
Bad:
```
function test() {
var e = $('#test');
var width = e.css('width');
if (width == '50px')
e.css('width', '100px');
 
var height = e.css('height');
if (height == '50px')
e.css('height', '100px');
}
```
```e.css()``` fires ```window.getComputedStyle()``` and then *reflow*.

Good:
```
function test() {
var e = $('#test');
var width = e.css('width'),
height = e.css('height');
 
if (width == '50px')
e.css('width', '100px');
 
if (height == '50px')
e.css('height', '100px');
}
```

**First read values then set new values.**


## Useful links:
- [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
- [Myth Busting: CSS Animations vs. JavaScript](https://css-tricks.com/myth-busting-css-animations-vs-javascript/)
- [REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?](http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)