How to Use CSS Transition in React for Smooth Animations

In React, you use CSS transitions by applying CSS styles with transition properties to elements and changing their styles via state or props. Use inline styles or CSS classes with transition properties, then update styles on events like clicks to trigger smooth animations.

Syntax

To use CSS transitions in React, define a transition property in your CSS or inline styles. This property controls which CSS properties animate, how long the animation lasts, and the easing function.

Example parts:

• transition-property: CSS property to animate (e.g., background-color, transform)
• transition-duration: time the animation takes (e.g., 0.3s)
• transition-timing-function: speed curve (e.g., ease, linear)

javascript

const style = {
  transition: 'background-color 0.3s ease',
  backgroundColor: 'blue'
};

Example

This example shows a button that changes color smoothly when clicked using CSS transitions in React. The backgroundColor style changes based on state, and the transition property animates the color change.

javascript

import React, { useState } from 'react';

export default function ColorTransitionButton() {
  const [active, setActive] = useState(false);

  const style = {
    padding: '1rem 2rem',
    fontSize: '1.2rem',
    color: 'white',
    backgroundColor: active ? '#4CAF50' : '#2196F3',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    transition: 'background-color 0.5s ease'
  };

  return (
    <button style={style} onClick={() => setActive(!active)} aria-pressed={active}>
      {active ? 'Active' : 'Inactive'}
    </button>
  );
}

Output

A blue button labeled 'Inactive' that smoothly changes to green and label 'Active' when clicked, toggling back on next click.

Common Pitfalls

Common mistakes when using CSS transitions in React include:

• Not specifying the transition property, so no animation happens.
• Trying to animate properties that cannot be transitioned (like display).
• Changing styles abruptly without using state or props, so React does not re-render the element.
• Forgetting to use camelCase for inline style properties in React (e.g., backgroundColor not background-color).

javascript

/* Wrong: No transition property, so no animation */
const styleWrong = {
  backgroundColor: 'red'
};

/* Right: Add transition property for smooth change */
const styleRight = {
  backgroundColor: 'red',
  transition: 'background-color 0.3s ease'
};

Quick Reference

Tips for using CSS transitions in React:

• Use transition on the element's style or CSS class.
• Change styles via React state or props to trigger transitions.
• Use camelCase for inline styles in React.
• Only properties that support transitions will animate (e.g., color, opacity, transform).
• Use aria-pressed or similar attributes for accessibility on interactive elements.

Key Takeaways

Add a CSS transition property to the element's style or class to enable animation.

Change styles using React state or props to trigger the transition effect.

Use camelCase style properties in React inline styles.

Only animatable CSS properties will smoothly transition.

Include accessibility attributes like aria-pressed for interactive elements.