styled-components keyframes animations - a very short guide

Ellen Styrélius — Tue, 15 Feb 2022 20:50:33 +0000

To create a @keyframes animation and use it with styled-components the first thing you need to do is to import the keyframes helper.

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

Just as the div, or any other “element” property that exists on the styled object imported from styled-components, keyframes is a function that you use as a tag for your template literal style declarations.

And just as with the divs and the buttons the result from the tag function is assigned to a variable. This variable is then used to reference the animation in your styled components (and since your keyframes animation is not a React component the variable should be named in camelCase and not PascalCase).

const rotate = keyframes`
  to {
    transform: rotate(360deg);
  }
`

const InfiniteRotate = styled.div`
  animation: ${rotate} 4s linear infinite;
`

function Spinner() {
  return <InfiniteRotate>🥴</InfiniteRotate>
}

It’s not really more complicated than that! And this syntax allows you to export the animation and use it in several places in your app with different durations, iteration counts etc.

P.S. Might be worth noting that keyframes can NOT be used with react-native, but there is a library for that called Animated.

DEV Community: Ellen Styrélius

styled-components keyframes animations - a very short guide