Transitions & Animation

Transition Property

sz prop	Tailwind class
{ transition: true }	transition
{ transition: 'all' }	transition-all
{ transition: 'colors' }	transition-colors
{ transition: 'opacity' }	transition-opacity
{ transition: 'shadow' }	transition-shadow
{ transition: 'transform' }	transition-transform
{ transition: 'none' }	transition-none

{ transition: 'colors', duration: 200 } — hover to see color change

hover mehover me

ease-out vs spring vs backout — click Trigger to compare

EASE-OUT

Trigger

SPRING BOUNCE

Trigger

BACKINOUT BOUNCE

Trigger

Duration

sz prop	Tailwind class
{ duration: 75 }	duration-75
{ duration: 100 }	duration-100
{ duration: 150 }	duration-150
{ duration: 200 }	duration-200
{ duration: 300 }	duration-300
{ duration: 500 }	duration-500
{ duration: 700 }	duration-700
{ duration: 1000 }	duration-1000
{ duration: '2000ms' }	duration-[2000ms]

Timing Function (Ease)

sz prop	Tailwind class
{ ease: 'linear' }	ease-linear
{ ease: 'in' }	ease-in
{ ease: 'out' }	ease-out
{ ease: 'in-out' }	ease-in-out
{ ease: 'initial' }	ease-initial

Delay

sz prop	Tailwind class
{ delay: 75 }	delay-75
{ delay: 100 }	delay-100
{ delay: 300 }	delay-300
{ delay: 500 }	delay-500
{ delay: 1000 }	delay-1000

Animation

sz prop	Tailwind class
{ animate: 'none' }	animate-none
{ animate: 'spin' }	animate-spin
{ animate: 'ping' }	animate-ping
{ animate: 'pulse' }	animate-pulse
{ animate: 'bounce' }	animate-bounce
{ motionReduce: { animate: 'none' } }	motion-reduce:animate-none

{ animate: 'spin' } — continuous rotation

{ animate: 'pulse' } — staggered delay: 0, 150, 300ms

{ animate: 'bounce' } — staggered loading indicator

Animation Delay

Tailwind v4 has no animation-delay-* utility. CSSzyx emits an arbitrary CSS property.

delay ≠ animationDelay

delay controls transition-delay (delay-150 → transition-delay: 150ms). animationDelay controls animation-delay ([animation-delay:150ms]). They are independent.

sz prop	Tailwind class
{ animationDelay: 150 }	[animation-delay:150ms]
{ animationDelay: 0 }	[animation-delay:0ms]
{ animationDelay: 300 }	[animation-delay:300ms]
{ animationDelay: '0.5s' }	[animation-delay:0.5s]

Examples

// Smooth color transition on hover
<button sz={{
  bg: 'blue-500',
  transition: 'colors',
  duration: 200,
  ease: 'in-out',
  hover: { bg: 'blue-600' },
}} />

// Loading spinner
<div sz={{ animate: 'spin', size: 6 }}>
  {/* spinner icon */}
</div>

// Staggered pulse dots — animationDelay, not delay
<div sz={{ animate: 'pulse', animationDelay: 0 }} />
<div sz={{ animate: 'pulse', animationDelay: 150 }} />
<div sz={{ animate: 'pulse', animationDelay: 300 }} />

// delay is transition-delay — only for CSS transitions
<div sz={{ transition: 'colors', delay: 100 }} />

// Respect reduced motion
<div sz={{
  animate: 'bounce',
  motionReduce: { animate: 'none' },
}} />