How to Add CSS Animation with Styled Components

Most developers love using styled-components in React Projects. The increased performance by loading only the required code for rendered components, plus the ability to write CSS directly in the component file, is a great advantage. With all its benefits, most developers were still worried about defining the keyframes in global index.css while adding animation with the CSS @keyframes rule. Fortunately, you can avoid this fuss because you can add energy through styled-components.

Referring to the styled-components docs, you can export a keyframes helper to generate a unique instance that can be used throughout the app. This is done to avoid name collisions when adding CSS animation with @keyframes because they aren't scoped to a single component.

Down below is a general code for a rendered contracting and expanding circle defined in global CSS definitions.

* global.css */

div.circle {
 height: 100px;
 width: 100px;
 border-style: solid;
 border-width: 5px;
 border-radius: 50%;
 border-color: black;
 animation-name: breath-animation;
 animation-duration: 8s;
 animation-iteration-count: infinite;
}

@keyframes breath-animation {
 0% { height: 100px; width: 100px; }
 30% { height: 400px; width: 400px; opacity: 1 }
 40% { height: 405px; width: 405px; opacity: 0.3; }
 100% { height: 100px; width: 100px; opacity: 0.6; }
}

The above code works just fine, but you need to render it only one component, so that’s a substantial piece of code that will be loaded whether you need it or not.

Now let’s look at the same code but rewritten with styled-components.

// src/components/breathe.js

import React from ‘react’ import styled from ‘styled-components’

const Breathe = () => { return ( <Container> <Circle /> </Container> ) }

const Circle = styled.div height: 100px; width: 100px; border-style: solid; border-width: 5px; border-radius: 50%; border-color: black; 

const Container = styled.div` display: flex; align-items: center; justify-content: center; flex-direction: column; height: 450px;

To use the keyframe animations in styled-components, import the keyframes by typing in - import {keyframe} from ‘styled-components’.

// src/components/breathe.js

import { keyframes } from ‘styled-components’

const breatheAnimation = keyframes` 0% { height: 100px; width: 100px; } 30% { height: 400px; width: 400px; opacity: 1 } 40% { height: 405px; width: 405px; opacity: 0.3; } 100% { height: 100px; width: 100px; opacity: 0.6; }

To wrap it all up, put the code together, and add the animation parameters in the definition of the ‘circle’ component.

// src/components/breathe.js

import React from ‘react’ import styled, { keyframes } from ‘styled-components’

const Breathe = () => { return ( <Container> <Circle /> </Container> ) }

export default Breathe

And With that, you’re done! You have successfully added CSS animations with styled-components. The example we’ve shown is a basic demonstration but using styled-components is not necessarily complex. Yes, it has a steeper learning curve compared to CSS modules, but it only takes some practice to get its hang.

Other useful articles: