CSS or JavaScript animations
Choose the simplest animation mechanism that meets sequencing and control needs.
Default
Use CSS transitions or keyframes for visual state changes. They are easy to cancel and keep view logic small.
Use JavaScript animation hooks when sequencing depends on application state, measurements, asynchronous work, or coordinated entry and removal.
Always respect reduced-motion preferences. Animation should explain change or preserve spatial context; it must not block input or carry required information by itself.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.