Animation

Dynamic visual effects that enhance user interaction and experience and make interfaces intuitive and engaging.

Cerberus extends the built-in animations provided by Panda-CSS.

animationName: 'ping' | 'pulse' | 'fadeIn' | 'fadeInDown';

Usage

Ping

preview mode

When to use

When you need to draw attention to a specific element.

Pulse

preview mode

When to use

When you need to show an initial loading placeholder animation.

Patterns

Animate In

preview mode

Fade In Down

preview mode

On this page