Transition.css
52 drop-in clip-path enter/exit transitions applied with an HTML attribute
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.
npm i transition-styleReach 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.
- 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
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
