css-animations

SKILL.md

CSS keyframe animations for HyperFrames with deterministic seeking and preview support.

Animates single elements with fixed duration and iteration count; use GSAP for multi-element choreography

Requires data-start and data-duration attributes for timeline synchronization; supports finite animation-iteration-count and animation-fill-mode: both

Adapter discovers animated elements by computed animation-name and seeks browser Animation handles, falling back to negative animation-delay in unsupported environments

Best for decorative loops, shimmer, glow, masks, and entrance effects; avoid infinite animations, layout property changes, and user-event-triggered state

CSS Animations for HyperFrames

HyperFrames can seek CSS keyframe animations through its css runtime adapter. Use this for simple repeated motifs, background motion, shimmer, glow, masks, and non-sequenced decoration.

For scene choreography, GSAP is usually clearer. CSS animations work best when the motion belongs to one element and has a fixed duration.

Contract

Put the animated element in the DOM before runtime initialization finishes.

Give timed elements a data-start value so local animation time matches the clip.

Use finite animation-duration and animation-iteration-count because the negative-delay fallback cannot represent unbounded duration in environments without WAAPI-backed CSS animations.

Prefer animation-fill-mode: both so seeked states hold before and after active motion.

Avoid wall-clock JavaScript, hover-triggered state, and class toggles that depend on user events.

The adapter discovers elements with computed animation-name, seeks their browser Animation handles when available, and falls back to pausing with negative animation-delay.

Basic Pattern