How to Create Animation using styled-components

Simple but elegant solution.

Mohammad Faisal
2 min readJun 7, 2023

Styled components is a popular CSS framework for single-page applications. Today we will see how we can create animations using styled-components.

To learn more about styled-components go here.

Now let’s see how we can animate our components using styled-components.

Get started

First, create a boilerplate application with ReactJS.

npx create-react-app styled-components-animation-demo

Then install the dependency

npm i styled-components

And we are ready to roll

Define the Animation

Let’s create a FadeInAnimation with styled-components.

const FadeInAnimation = keyframes`
0% {opacity:0;}
100% {opacity:1;}

This is a straightforward animation that brings a component into view smoothly.

Use the animation