keyframes.mdx

title
Keyframes

CSS Keyframes

Using keyframes with Theme UI is fully supported, but not part of the Theme UI library itself. Instead, use the keyframes helper from Emotion.

Usage

1. import { keyframes } from '@emotion/react'
2. Create a variable using keyframes for your animation (examples below)
3. Use the variable as the animation name, in an animation or animationName declaration

@emotion/react is a peer dependency of Theme UI, so while required alongside Theme UI packages, it needs manual installation in your project.

Examples

Using object syntax:

import { Box } from 'theme-ui'
import { keyframes } from '@emotion/react'

const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })

export default (props) => (
  <Box
    {...props}
    sx={{ animation: `${fadeIn} 1s backwards` }}
  />
)

To directly set animationName using object syntax, append .toString() to the animation variable. This workaround is not needed when using the variable inside a template string, such as above.

Using template literal syntax:

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { keyframes } from '@emotion/react'

const wave = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-5deg);
  }
`

export default (props) => (
  <div
    {...props}
    sx={{ animation: `${wave} 0.5s linear infinite alternate` }}
  />
)