Utility Reference
Transitions
Panda provides utilities for defining and customizing transitions.
Panda provides utilities for defining and customizing transitions.
Transition
A shorthand utility for defining common transition sets.
Values are all, common, colors, opacity, shadow, transform.
<div className={css({ transition: 'all' })} />
<div className={css({ transitionTimingFunction: 'linear' })} />
<div className={css({ transitionDelay: 'fast' })} />
<div className={css({ transitionDuration: 'faster' })} />| Prop | CSS Property | Token Category |
|---|---|---|
transitionTimingFunction | transition-timing-function | easings |
transitionDelay | transition-delay | durations |
transitionDuration | transition-duration | durations |
Animation
Control the animation property. It supports the animations token category.
<div className={css({ animation: 'bounce' })} />
<div className={css({ animationName: 'pulse' })} />
<div className={css({ animationDelay: 'fast' })} />| Prop | CSS Property | Token Category |
|---|---|---|
animation | animation-name | animations |
animationName | animation-name | animationName |
animationDelay | animation-delay | durations |
Full reference
Generated from @pandacss/preset-base, so this table always matches the utilities Panda ships.
Transition · 5
| Property | Shorthand | Class | Values |
|---|---|---|---|
| transition | — | trs | all | common | size | position | background | colors + 3 more |
| transitionDelay | — | trs-dly | durations |
| transitionDuration | — | trs-dur | durations |
| transitionProperty | — | trs-prop | common | colors | size | position | background |
| transitionTimingFunction | — | trs-tmf | easings |