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

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={{
      animationName: fadeIn,
      animationDuration: '1s',
      animationFillMode: 'backwards',
    }}
  />
)

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` }}
  />
)