v0.1.0 · 12 patterns · 3 templates

Motion patterns

A collection of web motion. Small CSS patterns and full scenes, each with a live demo, a reduced-motion state and a credit to where it came from. CSS first, no dependencies, MIT.

Get motion.css GitHub Suggest a motion

Use one in a minute

<link rel="stylesheet" href="motion.css">
<script src="play.js"></script>   <!-- only for in-view patterns -->

<h1>Hello</h1>
<p class="rise">The heading is already there; this line rises in.</p>

Or copy one entry: tokens.css plus that entry's style.css. Everything respects prefers-reduced-motion by showing the finished state.

Paper diorama hero

A full-screen hero where a cut-paper landscape builds behind a headline that is readable from the first paint. Birds drift once the scene is built.

csssvgin-view

Recreation of @dikipirasaputra

Code

Squeeze headline

A shop hero where a wide headline settles condensed, an underline draws in, the copy rises and a category band loops below.

csssvgvariable-fontload

Original

Code

Stamp collage

A menu board where paper scraps stamp on at a tilt, price stickers pop after each one, a live dot pulses and a shape drifts in the corner.

csssvgload

Original

Code

Crossfade

Three stacked frames take turns on a 12s cycle. The first frame is visible from the first paint.

cssloop

Original

Code

Draw

Lines that draw themselves: SVG strokes in sequence, a CSS-only text underline that wraps, and a link hover underline. No cap dot before the start.

csssvgin-view

Original

Code

Drift

Ambient float on three cycles that share no factor, so the path never visibly repeats. Composes with existing transforms; phase and size controls.

csssvgloop

Original

Code

Fade

Opacity only, for images and backgrounds. A frame that removes the white flash and layout shift, a focus-settle for photos, and an in-view variant.

csssvgload

Original

Code

Marquee

An endless row with edge fades, reverse rows and a CSS-only pause toggle. Under reduced motion it stops and wraps so every item is readable.

cssloop

Original

Code

Paper diorama build

Flat SVG layers with a paper shadow and grain rise back to front, each landing with a small overshoot.

csssvgin-view

Recreation of @dikipirasaputra

Code

Pop

Springy scale-in on a real damped spring, with opacity done early. Variants for in-view, corner origins and a tactile button press.

cssload

Original

Code

Pulse

A soft halo that beats then rests behind a status dot. A sonar variant for live states, a counted variant that stops, and a still ring under reduced motion.

cssloop

Original

Code

Scroll reveal

Rise tied to scroll position with animation-timeline: view(). No script; unsupported browsers show the content.

cssscroll

Original

Code

Rise

Entry from below with opacity landing early. Variants for in-view and a soft blur, plus a stagger capped at 8 steps.

cssload

Original

Code

Stamp

Pressed onto the surface: accelerates in, squashes on contact, settles at a tilt. An ink variant for Paid or Approved seals, and in-view.

cssload

Original

Code

Stretch and squeeze

Variable-width type: a headline settles from wide to condensed, and links widen on hover or focus.

cssvariable-fontload

Original

Code