CSS Transitions with React State Changes

A CSS transition smoothly interpolates a property between two values over time instead of snapping instantly. You declare it on the element with transition: property duration timing-function delay.

In React you usually do not animate inline values manually. Instead you toggle a class or style with state, and CSS handles the in-between frames for you.

The common pattern is to keep a boolean in useState and swap a CSS class when it changes. When the class changes, the target property gets a new value and CSS animates the difference.

For example isOpen drives whether the element has the open class, and the open class sets a different height or transform.

A typical setup is const [isVisible, setIsVisible] = useState(false). A button calls setIsVisible(v => !v) to flip it.

Using the functional updater v => !v avoids stale state when several updates queue together, which keeps the toggle reliable.

You build the className dynamically: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. The base class holds the transition declaration, and the modifier classes hold the start and end values.

Keeping transition on the always-present base class means the animation runs in both directions, opening and closing.

You can animate several properties at once by listing them: transition: transform 300ms ease, opacity 300ms ease. A fade-and-slide combines an opacity change with a translateY on transform.

Animating both together gives a polished entrance where the element slides up while fading in.

transition-delay postpones the start of a transition. By giving list items increasing delays you create a staggered cascade where each item animates slightly after the previous one.

In React you can compute the delay inline, for example style={{ transitionDelay: index * 50 + 'ms' }}.

The display property is not animatable because it has no intermediate values between none and block. Transitioning it produces an instant jump, not a fade.

Instead animate opacity for the visual fade and toggle pointer-events: none so the hidden element ignores clicks while invisible.

The timing function shapes how speed changes over the duration. linear moves at constant speed, ease starts and ends slowly, and cubic-bezier(...) lets you define a fully custom curve.

Custom curves are great for snappy or bouncy feels, for example cubic-bezier(0.34, 1.56, 0.64, 1) for a slight overshoot.

You can store durations in CSS custom properties like --speed: 300ms and reuse them: transition: opacity var(--speed) ease. This keeps timing consistent across components.

React can even set the variable inline via style={{ '--speed': '500ms' }}, letting props drive animation timing.

Browsers can animate transform and opacity on the GPU compositor without recalculating layout or repainting. Animating properties like width, top, or margin forces layout work every frame and can stutter.

When you need to move, scale, or rotate, reach for transform; when you need to fade, use opacity.

A reliable transition in React combines a boolean state, a conditional modifier class, and a base class that declares transition on GPU-friendly properties. State flips the class and CSS does the animating.

This keeps your components declarative while leveraging the browser to produce smooth motion.

Test your understanding of performant animation.

You learned to trigger CSS transitions by toggling state-driven classes, animate transform and opacity together, stagger with delays, and avoid transitioning display by using opacity plus pointer-events.

You also saw timing functions, CSS-variable durations, and why GPU-composited properties keep motion smooth.