How to Create Animation using styled-components

Simple but elegant solution.

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.

styled-components

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