Transition.css

52 drop-in clip-path enter/exit transitions applied with an HTML attribute

Tier B · UsefulAnimation LibraryTooltransition.style

(Visit transition.style ↗)(Docs)(Repository)

Transition.css is a tiny CSS-only library of clip-path based enter and exit transitions by Adam Argyle. You add an attribute such as transition-style="in:circle:bottom-right" to an element and it animates in or out — no JS, no class-name collisions. Reading the published stylesheet gives 52 attribute values: 26 named effects (circle, square, diamond, wipe and polygon variants across centre, four corners, four edges, plus hesitate, cinematic and opposing-corners) each in an in: and out: form. It ships as the transition-style npm package, is served whole or as circles/squares/polygons/wipes sub-bundles from unpkg, and a 'hackpack' build exposes only the custom properties so you can compose your own.

Install

npm i transition-style

For an agent

Reach for this instead of Motion or GSAP when the requirement is a decorative reveal or dismiss and nothing else — it is pure CSS, the attribute syntax cannot clash with a utility class, and you can import one sub-bundle (say wipes) rather than all 52 effects. The homepage at transition.style is an empty Svelte shell with no server-rendered body, so do not try to read the effect list from it; fetch https://unpkg.com/transition-style instead and grep for transition-style= to enumerate every value. Verify prefers-reduced-motion handling yourself before shipping — clip-path reveals across a full viewport are exactly the kind of motion that triggers vestibular problems.

Why it is here. It shows how far plain CSS clip-path gets you on transitions that teams usually reach for a JS animation library to do. The attribute-based API is a small idea that removes a whole class of naming friction.

Install command, framework, licence and component list.

Facts

License: Apache 2.0
Pricing: Free, Open source
Framework: Vanilla JS
Styling: Vanilla CSS, CSS custom properties
Distribution: npm package, GitHub repository, Copy-paste snippet
Platform: Web
Content type: Code
Agent readiness: Copy-paste ready code, Readable open source, Client-rendered shell
Accessibility: Unknown
Maturity: Stable
GitHub stars: 2,024
Package: transition-style

Components it ships

Page Transition Transition Animation

Helps you build

Homepage Features

Notable for

52 attribute values across 26 named effects
attribute API, not class names
per-category CDN sub-bundles
hackpack build exposing only custom properties
Apache-2.0, by Adam Argyle

Provenance

Verified 2026-08-16. HTTP 200. https://transition.style (curl — 1.8KB, empty <body>, confirmed JS-only shell), https://unpkg.com/transition-style (curl of the 28KB stylesheet — enumerated all 52 transition-style values), https://github.com/argyleink/transition.css (WebFetch), GitHub search API for stars/licence/pushed_at

Also in Motion & Interaction

transition.styleTier B