Web Animation

• CSS vs. JS Animation: Which is Faster?
  • avoid layout thrashing
  • css transition:
    • optimized DOM interaction
    • raf under hook
    • hardware accleleration
    • data transfer between main thread and compositor thread
    • compatablity issues
    • most time, uncontorlled by js
  • use raw css transition when state change is simple
    • Transit: library that managing css transition
  • js can get the some performence as css does
    • 3D animation demo withou WebGL and Canvas: https://www.youtube.com/watch?v=MDLiVB6g2NY&hd=1
    • synchronizing the DOM: minimize the layout thrashing
    • caching property values across chains calls
    • caching unit conversion rations
    • skiping style update when updates would be visiually imperceptible
• https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
  • Change position with top/left will force browser to layout.