css-nativelisted

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was > verified on **2026-09-08** against primary sources. What against, and when, is in > `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number. # CSS Native — Zero-Dependency Animations & Visual Techniques ## When to Use CSS Native vs Library | Situation | Decision | |---|---| | < 3 animations on the page | CSS native | | Scroll-driven reveal/parallax | CSS native (`animation-timeline`), always inside `@supports (animation-timeline: scroll())` with the content visible by default — no Firefox release support | | Enter/exit from `display: none` | CSS native (`@starting-style` + `transition-behavior: allow-discrete`) | | Tooltip/popover positioning | CSS native (anchor positioning) | | Page transitions (MPA or SPA) | CSS native (View Transitions API) | | Complex multi-step timeline (5+ tweens) | GSAP | | Stagger across dynamic list (unknown count) | CSS native (`animation-delay: calc(sibling-index() * 60ms)`), Baseline since Aug 2026. Reach for a library only if the stagger has to be interrupted or re-sequenced at runtime | | Physics-based spring with interruption | Framer Motion | | Morph between SVG shapes | GSAP MorphSVG | Rule of thumb: if you can express it in a `@keyframes` + one `animation-timeline`, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values — reach for a library. --- ## Scroll-Driven Animations ###