CSS only, zero runtime
Animation you ship,
not animation you load.
97 classic presets, atoms that actually stack, scroll reveals that degrade honestly, glass, and 395 effects in total. Nothing to hydrate. 20.6 KB for all of it, or about 4 after tree-shaking.
Effects that stack instead of fight
Two effects that both write transform will always fight: the last one declared wins and the other silently does nothing. Animatio's atoms each own a single registered channel, so stacking them composes. Click either box — the count is read off the live element, not written into the caption.
an-fadean-up
--an-o + --an-y Opacity and vertical travel, each on its own channel.
an-fadean-upan-spin
--an-o + --an-y + --an-rz A third atom joins without touching what the other two wrote.
Animations
Entrances, exits and attention seekers, all 135 of them. Click any tile to run it: nothing on this site autoplays.
**MIT licensed — free and open source**, for commercial work too, with no obligation to open your own source. [Contributions welcome](https://github.com/radioBros/animatio/blob/master/CONTRIBUTING.md).
Browse all 392, or read about the atoms that stack.
Effects
Glass, text treatments, borders, loaders, backgrounds. These are surfaces rather than animations, so they simply are: nothing to press play on.
Tune them live in the surfaces studio.
Scroll, with a real demo
Three tiers, from native animation-trigger down to plain visible content. No scroll listener, no observer, no library.
The scroll lab runs the whole ladder and tells you which tier your browser resolved to.
What you get
- 97
- classic entrance, exit and attention presets, generated from a pinned fixture so the timing is byte-identical
- 24
- composable atoms, each owning one
@propertychannel - 3
- scroll-reveal tiers, from native
animation-triggerdown to plain visible content - 272
- animating selectors, every one with a reduced-motion treatment generated from the compiled CSS
- 20.6 KB
- gzipped, for all of it
- 3.5 KB
- gzipped, for a real page after tree-shaking
- 0
- runtime dependencies, and nothing to hydrate
Every number above is asserted by a CI gate or a test, so none of them can rot.
Where it degrades, and where it stops
Published up front rather than discovered in production.
Scroll reveals resolve through three tiers and never hide what they cannot show again. In Firefox stable, which still has scroll-driven animations behind a flag, content simply renders finished and readable. Check what your browser does.
backdrop-filter: url() is broken, not merely unsupported: WebKit parses it and renders nothing, so @supports returns true and would switch the broken path on. Refraction is opt-in behind an attribute you set after your own probe.
Cursor tracking, text scramble and particles are not possible in CSS. They are on the limits page with the nearest honest substitute for each, rather than shipped as options that quietly do nothing.
Loaders keep running under reduced motion. WCAG 2.3.3 exempts essential motion, and a frozen spinner reads as a hung page. Ambient loops pause, flashing effects are removed outright.