Guidelines for animation

1. Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.
2. If needs to be it’s JS-based animation, use requestAnimationFrame. Avoid setTimeout, setInterval.
3. Avoid changing inline styles on every frame (jQuery animate()-style) if you can, declarative animations in CSS can be optimized by the browser way more.
4. Using 2D transforms instead of absolute positioning will typically provide better FPS by way of smaller paint times and smoother animation.
5. Use Timeline Frame’s mode to investigate what is slowing down your behavior
6. “Show Paint Rects” and “Render Composited Layer Borders” are good pro-moves to verify where your element is being rendered.

动画准则

1. 在条件允许的情况下用keyframe animation 或者css transition 代替其他方式（比如settimeout，requestAnimationFrame，虽然后者性能已经很高了）浏览器可以实现优化绘制把重复工作整合
2. 如果需要使用js定时器，请使用requestAnimationFram，避免使用settimeout和setinterval
3. 避免在元素上直接改变内联style（就像jquer的animate（）干的那样）如果可以，在css文件内声明动画将会更多的得到浏览器的优化方案支持
4. 使用2Dtransform代替position：absolute动画，这样将会得到更好的fps帧和更流畅的动画效果（确保display：block或者display：inline-block）
5. 使用 Timeline Frame’s模式（chrome内）检查是什么原因导致性能不足
6. 使用“Show Paint Rects”和 “Render Composited Layer Borders”功能（chrome 的 rendering内）是一种不错的方式去查看你的页面元素渲染过程