CSS Animations for HyperFrames

What it does

Provides practical patterns and adapter guidance for using CSS keyframe animations with the HyperFrames runtime. It explains the contract required for seekable CSS motion (data-start/data-duration), recommends finite durations and fill modes, and shows basic and staggered patterns with code samples so agents can generate renderable HTML/CSS that HyperFrames will control deterministically.

When to use it

Use this skill when a motion belongs to a single element or decorative layer (shimmers, glows, masks, simple entrances) and you want a lightweight, CSS-only solution instead of a full JS timeline. Prefer it for repeated motifs with known iteration counts or background motion not tied to user events. Avoid when choreography requires many elements or interactive triggers.

What's included

• Scripts: none detected (has_scripts=false)
• References: MDN links and adapter source pointers included in the SKILL.md (has_references=false)
• Instructions: contract rules (place element before runtime init, use data-start/data-duration, finite animation-duration and iteration-count, prefer animation-fill-mode: both), basic pattern and stagger examples, validation commands (npx hyperframes lint, npx hyperframes validate).

Compatible agents

Best for code-focused agents that can author HTML/CSS snippets and run simple validation (Copilot/Code agents, Cursor, Gemini Code). Agents that output HTML templates for rendering pipelines will benefit most.