Animations - alexanderteplov/computer-science GitHub Wiki

Animations and performance

Animations

  1. JavaScript
    1. Use requestAnimationFrame() to control animations
    2. Use requestIdleCallback() to serve background work without impacting latency-critical events as animation and input response
  2. CSS
    1. Animate only CSS properties that don't trigger layout:
      • transform: translate()
      • transform: rotate()
      • transform: scale()
      • opacity
    2. For reasonable optimization use will-change
  3. Web Animations API
    1. It is one of the most performant ways to animate on the Web
⚠️ **GitHub.com Fallback** ⚠️