Utilities
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 |