Skip to content
Theme UI
GitHub

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` }}
/>
)
Edit the page on GitHub
Previous:
Layouts
Next:
Styled Components