Animation Styles

Overview

Animation styles allow you to define reusable animation properties. The goal is to reduce the amount of code needed to animate components.

The supported animation styles are:

Animation: animation composition, delay, direction, duration, fill mode, iteration count, name, play state, timing function
Animation range: animation range, start, end, timeline
Transform origin: transform origin

Defining animation styles

Animation styles are defined using the defineAnimationStyles function.

Here's an example of an animation style:

animation-styles.ts

import { defineAnimationStyles } from '@pandacss/dev'
 
const animationStyles = defineAnimationStyles({
  bounceFadeIn: {
    value: {
      animationName: 'bounce, fade-in',
      animationDuration: '1s',
      animationTimingFunction: 'ease-in-out',
      animationIterationCount: 'infinite',
    },
  },
})

Built-in animation styles

Cerberus provides a set of built-in animation styles that you can use.

emphasized-fade-in

Note

You can change the direction of some animations by using the `data-placement` attribute with the value of: top,bottom,left, or right.

Update the theme

To use the animation styles, update the theme object with the animationStyles property.

panda.config.ts

import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'
import { animationStyles } from './animation-styles'
 
export default createCerberusConfig({
  presets: [createCerberusPreset()],
 
  include: ['./app/**/*.{ts,tsx}'],
  exclude: [],
 
  theme: {
    extend: {
      animationStyles,
    },
  },
})

Using animation styles

Now you can use animationStyle property in your components.

<Box
  data-state="open"
  animationDuration="slow"
  animationStyle={{ _open: 'slide-fade-in', _closed: 'slide-fade-out' }}
>
  This content will fade in
</Box>

JSX Patterns

To make using animations even easier, Cerberus provides JSX patterns for all built-in animation styles. You can use these patterns to quickly apply animations to your components.

Loading example...