Animation

Keyframe animation presets: fade, slide, scale, bounce, spin, and reduced-motion safe variants.

Entrance

anim-fade-in

anim-slide-up

anim-slide-down

anim-slide-left

anim-slide-right

anim-scale-in

anim-bounce-in

Exit

anim-fade-out

anim-scale-out

Looping

anim-spin

anim-ping

anim-pulse

anim-float

Attention

anim-shake

Duration modifiers

Append anim-fast, anim-slow, or anim-slower to override the default duration on any animation class.

fast (150ms)

base (250ms)

slow (400ms)

slower (600ms)

Staggered children

Combine delay utilities to create sequence effects without JavaScript. Click to replay.

Reduced motion

All [class*="anim-"] selectors respect prefers-reduced-motion: reduce via a single media-query block. Duration is clamped to 0.01 ms and iteration-count forced to 1 so looping animations immediately settle. No per-class overrides needed.

@media (prefers-reduced-motion: reduce) { [class*="anim-"] { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

Underlying tokens

Animation classes consume the same duration and easing tokens as the Transition system. Defined in token.css → §11 TRANSISI.

--duration-fast 150ms

--duration-base 250ms

--duration-slow 400ms

--duration-slower 600ms

--easing-default cubic-bezier(0.4, 0, 0.2, 1)

--easing-in cubic-bezier(0.4, 0, 1, 1)

--easing-out cubic-bezier(0, 0, 0.2, 1)

--easing-spring cubic-bezier(0.34, 1.56, 0.64, 1)

Other Components in Foundation