How can I use CSS animations in my React app?

How can I use CSS animations in my React app?

You can use CSS animations in React by defining your animations in a CSS file and applying them to your components using class names.

Can you give me an example of how to implement a fade-in effect?

Sure! First, define a fade-in animation in your CSS:

.fade-in {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Then, apply the class to your React component:

function MyComponent() {
  return <div className='fade-in'>Hello, World!</div>;
}

What if I want to trigger the animation on a button click?

You can manage the animation state using React's state. For example:

import React, { useState } from 'react';

function MyComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(true)}>Show</button>
      {isVisible && <div className='fade-in'>Hello, World!</div>}
    </div>
  );
}