How can I use animations with styled-components in React?

How can I use animations with styled-components in React?

You can use the keyframes function from styled-components to create animations. Here's a simple example.

Can you show me a code snippet for a fade-in animation?

Sure! Here's a basic fade-in animation:

import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

const FadeInDiv = styled.div`
  animation: ${fadeIn} 2s ease-in;
`;

You can use FadeInDiv in your component.

How do I control the duration of the animation?

You can adjust the duration by changing the value in the animation property. For example, animation: ${fadeIn} 1s ease-in; will make it last 1 second.