CSS Keyframe Animations with React

A @keyframes rule describes a multi-step animation by naming property values at points along a timeline, using from/to or percentages like 0%, 50%, 100%.

Unlike transitions, keyframes can describe complex multi-stage motion that runs on its own without a state change at every step.

You apply a keyframe set with the animation property: animation: slideIn 400ms ease forwards. It bundles the name, duration, timing function, and fill mode.

The forwards fill mode keeps the element at its final keyframe values after the animation ends, preventing a snap back to the start.

In React you typically add a class that carries the animation declaration when state becomes true. For instance, adding is-entering starts the keyframes the moment the element mounts or a flag flips.

This keeps the animation logic in CSS while React just decides when to attach the class.

animation-fill-mode controls what styles apply before and after the animation runs. forwards retains the last keyframe, backwards applies the first keyframe during any delay, and both does both.

Without forwards, an element animating to a faded-in state would jump back to invisible when the animation completes.

animation-direction: alternate plays the animation forward then backward on each iteration. Combined with animation-iteration-count: infinite it creates a smooth back-and-forth like a pulsing or breathing effect.

This is handy for loading indicators or subtle attention-drawing motion.

animation-play-state can be running or paused. You can drive it from React state, for example pausing a marquee on hover by switching a class.

Because it pauses rather than resets, the animation resumes from exactly where it stopped.

A keyframe animation only plays once when its class is first applied; re-adding the same class will not restart it. The cleanest React trick is to change the element key so React remounts a fresh node, replaying the animation from the start.

For example key={count} on a toast remounts it each time count increments.

Some users enable reduced motion in their OS for comfort or accessibility. Wrap nonessential animations in @media (prefers-reduced-motion: reduce) and disable or shorten them there.

Honoring this preference makes your interface more inclusive and avoids triggering discomfort.

To animate elements as they enter the viewport, use an IntersectionObserver in a useEffect. When the entry becomes visible you set state, which adds the animation class.

This produces reveal-on-scroll effects without heavy scroll listeners running on every frame.

animation-delay staggers when each keyframe animation begins. Giving a list of items increasing delays makes them animate in sequence for a choreographed reveal.

You can compute the delay per item in React with style={{ animationDelay: i * 80 + 'ms' }}.

Use transitions for simple two-state changes driven by interaction, and keyframes when you need multi-step motion, looping, or animation that runs independently of a state toggle.

Both are pure CSS, so React only decides when classes attach and the browser handles the frames.

Test your understanding of keyframe behavior.

You learned to define @keyframes, apply them with the animation shorthand, control fill mode and direction, pause and re-trigger animations, and reveal elements on scroll with IntersectionObserver.

You also saw how to respect prefers-reduced-motion for accessible motion.