ContextQMD
Back to Styled Components

Keyframes

sections/api/helpers/keyframes.mdx

latest1.5 KB
Original Source

import Code from 'components/Code' import Table, { Row, Column } from 'components/Table'

keyframes | web-only

A helper method to create keyframes for animations.

<Table head={['Arguments', 'Description']}> <Row> <Column> 1. <Code>TaggedTemplateLiteral</Code> </Column> <Column>A tagged template literal with your keyframes inside.</Column> </Row> </Table>

Returns a Keyframes model, to be used in your animation declarations. You can use the getName() API on the returned model if you wish to obtain the generated animation name.

In styled-components v3 and below, the keyframes helper directly returned the animation name instead of an object with the getName method.

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

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

const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`

If you are composing your style rule as a partial, make sure to use the css helper.

tsx
import styled, { css, keyframes } from 'styled-components'

interface AnimationProps {
  $animationLength: number;
}

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

const animation = props =>
  css<AnimationProps>`
    ${pulse} ${props.$animationLength} infinite alternate;
  `

const PulseButton = styled.button<AnimationProps>`
  animation: ${animation};
`

You can learn more about using animations with styled-components in the Animations section.