css-animations

Give the animated element a data-start value, a finite animation-duration and animation-iteration-count, and animation-fill-mode: both. The css adapter discovers elements with a computed animation-name and seeks their browser Animation handles, falling back to pausing with negative animation-delay.

Use CSS animations for simple one-element motion with a fixed duration, such as decorative loops, shimmer, glow, or masks. Use GSAP for scene choreography and sequenced timelines where multiple elements must be coordinated.

Avoid infinite animations unless you have verified the browser exposes seekable WAAPI-backed CSS animation handles. The negative-delay fallback cannot represent unbounded duration, so prefer a finite iteration count covering the visible duration.

Set a custom property like --i on each element and use animation-delay: calc(var(--i) * 120ms) with a single shared keyframes rule. This staggers repeated elements such as dots or list items with one animation definition.

Common causes are missing animation-fill-mode: both, infinite iteration counts, or class toggles triggered by hover or other user events. Also avoid animating layout properties like top or width when transforms would work.