Agent skill · software engineering · aiskillstore
css-animations
CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.
Why this skill is useful
Provides specific CSS animation patterns and best practices tailored for HyperFrames that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Stagger Pattern Use CSS custom properties to avoid duplicating keyframes: Good Uses Decorative loops with a known repeat count. Mask, glow, shimmer, grain, and subtle parallax layers. Simple one-element entrances where a full JS timeline would be excessive. Avoid Infinite CSS animations unless you have verified the browser exposes seekable WAAPI-backed CSS animation handles. Prefer a finite iteration count covering the visible duration. Animating layout properties like top, left, width, or height when transforms work. Relying on hover, focus, scroll, or media queries to trigger render-critical motion. Changing animation classes after startup unless another deterministic timeline controls that change. Validation After editing CSS animation compositions: Credits And References HyperFrames adapter source: packages/core/src/runtime/adapters/css.ts. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/css-animations