Types of React Transitions
Types of React Transitions
React transitions can be categorised by mechanism (how they work) and purpose (what they animate).
Mechanism
CSS Transitions
The simplest approach. Define a transition property in CSS and toggle class names with React state. Zero runtime overhead, hardware-accelerated.
Library
CSS Animation (Keyframes)
Use @keyframes for multi-step animations. Triggered by adding a class. Best for looping or complex multi-stage motion.
Library
react-transition-group
The official React community library. Provides lifecycle-aware wrappers (Transition, CSSTransition, SwitchTransition, TransitionGroup) for mount/unmount transitions.
Library
Framer Motion
The most powerful React animation library. Declarative motion components, layout animations, shared element transitions, gesture-driven motion, and spring physics.
React 18 API
Concurrent Transitions
startTransition and useTransition, React 18’s scheduling API. Not visual animations, but ensures expensive state updates don’t block the main thread.
Custom
Custom Hooks
Roll your own with useSpring-style hooks using requestAnimationFrame, the Web Animations API, or GSAP behind a React interface.