CSS Animations · Reveals

Everything here is one HTML attribute.

Scroll the matrix Read the catalog docs →

Beauty portrait against chartreuse, in a gold sequinned jacket with glitter brows and black crystal earrings

The entrance matrix

All 32 entrance names the library ships, grouped like the catalog.

Fade — 5

data-kui="fade-in 2000ms"

Beauty portrait against a yellow backdrop — a blue bob with a blunt fringe, a yellow paint patch across one eye, and deep blue lips — data-kui="fade-up 2000ms"

data-kui="fade-down 2000ms"

Portrait in an emerald blazer and afro, dramatic window-shadow lighting against green — data-kui="fade-right 2000ms delay:2000ms"

Black-and-white beauty close-up, hand at chin, statement drop earrings — data-kui="fade-left 2000ms distance:100px"

Slide — 4

Close-up portrait rendered in glossy magenta, dramatic reflective lighting — data-kui="slide-up distance:480px"

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

Portrait in a green jumpsuit against a matching green backdrop, one leg raised — data-kui="slide-right distance:480px"

Model wearing a mirrored visor, lit in orange and blue — data-kui="slide-left distance:480px"

Logical (RTL-aware) — 4

Editorial fashion portrait in monochrome mustard-gold, oversized coat — data-kui="slide-inline-end distance:480px"

Portrait dripping in glossy pink paint, eyes closed, dramatic pink backdrop — data-kui="slide-inline-start distance:480px"

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

Portrait in a blue uniform and cap, a giant blue butterfly covering the eyes — data-kui="slide-block-end distance:480px"

Zoom — 4

Bold black and yellow face paint with cat-eye glasses, red lips — data-kui="zoom-in scale:0.05"

Beauty portrait in a white knit wrap and mirrored white sunglasses, bold red lips — data-kui="zoom-in-up scale:0.05 distance:150px"

data-kui="zoom-in-down scale:0.05 distance:150px"

data-kui="pop-in scale:0.05"

Flip — 2

data-kui="flip-in-x"

Portrait in an orange coat and beanie, tinted square sunglasses against an orange backdrop — data-kui="flip-in-y"

Rotate — 5

Beauty portrait in a rhinestone-mesh hood and matching bodysuit, bold red lips — data-kui="rotate-in"

Portrait lit entirely in purple, beret and round sunglasses against a striped backdrop — data-kui="rotate-in-left"

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

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

data-kui="swing-in"

Blur — 1

Beauty portrait with white curls, cobalt lips and blue fur gloves framing the face — data-kui="blur-in 2000ms"

Combo presets — 2

data-kui="fade-blur-up 2000ms"

Black-and-white portrait, red silk blindfold and red gloves framing the face — data-kui="fade-blur-in 2000ms"

Character easing — 5

Beauty portrait with a yellow bob wig, yellow eyeshadow, and freckles against a yellow backdrop — data-kui="bounce-in 1500ms"

Glossy red paint mask over the eyes, black lips, black gloves against red — data-kui="bounce-in-up 2000ms"

Beauty portrait in a white knit wrap and mirrored white sunglasses, bold red lips — data-kui="bounce-in-down"

Beauty portrait with white curls, cobalt lips and blue fur gloves framing the face — data-kui="back-in-up"

data-kui="back-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.

Portrait dripping in glossy pink paint, eyes closed, dramatic pink backdrop — slide-up 900ms, blur-in 600ms delay:1800ms — blur waits a full beat after the slide finishes

Red silk fabric swept across the eyes, bold red lips exposed below — fade-up 900ms, zoom-in 700ms

Portrait in a blue uniform and cap, a giant blue butterfly covering the eyes — three disjoint channels

Parameters

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

Portrait lit entirely in gold, tinted round sunglasses and a black turtleneck — distance:140px

Bold black and yellow face paint with cat-eye glasses, red lips — expo-out easing

Neon-lit portrait in orange and blue, angular mirrored visor glasses — angle:-90deg

A model in a green jumpsuit against a flat green backdrop, one knee raised, in pale pink platform shoes — axis:horizontal fold:true

Beauty portrait in an oversized pink ruffled headpiece against a magenta backdrop — angle:35deg slats:10 from:start

Triggers

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

on:hover — point at me

Close portrait in monochrome yellow, autumn leaves resting over closed eyes — on:click — click me

Monochrome teal portrait in a curved sculptural hat — on:click — click to toggle the blur

Portrait in black wind-swept fabric wrapped over the eyes, bold red lips against a red backdrop — on:load — already ran