CSS Animations · Reveals

Everything here is one HTML attribute.

No JavaScript on this page configures anything. Each element carries a data-kui value, and the library compiles it into a single CSS @keyframes rule — entrance, composition, parameters, and trigger, all in one string.

Scroll the matrix Read the catalog docs →

Scroll slowly — every card below reveals on its own enter timeline.

Black-and-white portrait in a dramatic ruffled coat, hand raised to the chin

The entrance matrix

All 32 entrance names the library ships, grouped the same way the catalog groups them. The matching 16 exit names (fade-out, slide-out-left, and friends) aren't shown here — an exit effect's resting state is invisible, so there's nothing honest to demo with a scroll-triggered card.

Fade — 5

Red Sony over-ear headphones floating against a red-to-blue gradient backdrop — data-kui="fade-in"

Frosted pump-bottle product shot resting on a driftwood branch — data-kui="fade-up"

Red running shoe suspended against a near-black backdrop — data-kui="fade-down"

Mesh-strap watch resting on slate, sunburst flaring off the crystal — data-kui="fade-right"

Slide — 4

Over-ear headphones in gunmetal and brown leather, Aethelred Audio branding — data-kui="slide-up"

Close portrait in monochrome yellow, autumn leaves resting over closed eyes — data-kui="slide-down"

Portrait in a green jumpsuit against a matching green backdrop, one leg raised — data-kui="slide-left"

Model wearing a mirrored visor, lit in orange and blue — data-kui="slide-right"

Logical (RTL-aware) — 4

Editorial fashion portrait in monochrome mustard-gold, oversized coat — data-kui="slide-inline-start"

Tangled white and gold light-trail streaks against near-black — data-kui="slide-inline-end"

Editorial fashion portrait in monochrome pink, blowing a bubblegum bubble — data-kui="slide-block-start"

A single water splash frozen mid-motion on pure black — data-kui="slide-block-end"

Zoom — 4

Black-and-white study of crossed staircase shadows against a stark wall — data-kui="zoom-in"

Gucci nail polish bottles, one pouring lacquer over the other against a lilac backdrop — data-kui="zoom-in-up"

data-kui="zoom-in-down"

Flip — 2

Leather AirPods case, open, with both earbuds resting on a leather backdrop — data-kui="flip-in-x"

Rotate — 5

Blur — 1

Amber perfume bottle staged with dried flowers between a plaster arch and stone — data-kui="blur-in"

Combo presets — 2

Stacked diamond rings on dark draped fabric — data-kui="fade-blur-in"

Character easing — 5

Long-exposure portrait dissolving into streaks of warm and cool light — data-kui="bounce-in-down"

Composition

Two or three effects in one attribute. They compile into a single declaration with parallel value lists, and are only allowed when the CSS channels they own are disjoint.

Parameters

Any parameter the primitive declares can be tuned inline, and is validated before it ever reaches CSS.

Triggers

Effects don't have to fire on enter — hover, click, and load are first-class triggers too.