DocsBlog

  • 1.3.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

Cerberus FactoryResponsive DesignCSS VariablesThemes & Color ModesColor Opacity ModifierConditional StylesVirtual ColorCascade Layers

Compositions

Animation StylesLayer StylesNewText Styles

Style Props

BackgroundBorderEffectsSpacingText GradientTransitionsZ-Index

Animation Styles

Learn how to use animation styles to define reusable motion properties.

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

On this page

Loading...

Loading...

Loading...

Loading...

Transform origin

Defining animation styles

Animation styles are defined using the defineAnimationStyles function.

Here's an example of an animation style:

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"

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"

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.

animation-styles.ts
import { defineAnimationStyles } from "@pandacss/dev"


const animationStyles = defineAnimationStyles({
  bounceFadeIn: {
    value:
export default createCerberusConfig({
presets: [createCerberusPreset()],
include: ['./app/**/*.{ts,tsx}'],
exclude: [],
theme: {
extend: {
animationStyles,
},
}
})
}}
>
This content will fade in
</Box>
{
animationName: "bounce, fade-in",
animationDuration: "1s",
animationTimingFunction: "ease-in-out",
animationIterationCount: "infinite",
},
},
})
Copy
import { Box, EmphasizedSlideIn } from "styled-system/jsx"


<EmphasizedSlideIn>
  <Box>This content will slide in with emphasis
</
Box
>
</EmphasizedSlideIn>
Cerberus Design System | Docs

On this page

  • Overview
  • Defining animation styles
  • Built-in animation styles
  • Update the theme
  • Using animation styles
  • JSX Patterns
  • Edit this page on Github