skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

css-animations

Seek and synchronize CSS keyframe animations within HyperFrames using a CSS runtime adapter.

7|9|Updated May 9, 2026
Search Tags:#css#deterministic#motion-design#ui-animation#web-animation#css-animations#hyperframes
One-click install
npx skills add https://github.com/hoanghd218/claude-code-2-days --skill css-animations-hoanghd218
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-animations
Source: https://github.com/hoanghd218/claude-code-2-days/tree/main/.agents/skills/css-animations
Command: npx skills add https://github.com/hoanghd218/claude-code-2-days --skill css-animations-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames can seek CSS keyframe animations through its CSS runtime adapter to enable deterministic playback for simple CSS-driven motion such as background movement, shimmer, glow, masks, and non-sequenced decoration.

Core Features & Use Cases

  • Seek and synchronize CSS animations by targeting elements with computed animation-name and using WAAPI-backed handles when available.
  • Best for motion that belongs to a single element with a fixed duration; use GSAP for more complex choreography.
  • Patterns include Basic Pattern with data-start, data-duration, and data-track-index, and Stagger Pattern using CSS custom properties.
  • Good Uses: decorative loops, masks, glow, shimmer; Avoid infinite CSS animations unless WAAPI-backed handles are available; avoid triggering layout changes during animation.

Quick Start

Include the animated element in the DOM before runtime initialization and give it finite duration with a data-start value to ensure deterministic seeking.

Frequently Asked Questions about css-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I synchronize CSS keyframe animations for deterministic playback in HyperFrames?▼

You can synchronize CSS keyframe animations by using a CSS runtime adapter to seek and synchronize animation timing, targeting elements with computed animation-name and WAAPI-backed handles when available.

What are the requirements for CSS elements to support seeked animation states?▼

Seeked animation states require a properly placed DOM element with data-start and data-duration attributes, finite animation-iteration-count, and animation-fill-mode to ensure consistent timing.

When should I use CSS animations versus GSAP for motion design in HyperFrames?▼

Use CSS animations for single-element motion with fixed duration like decorative loops, masks, glow, or shimmer; use GSAP for more complex choreography and sequenced motion design.

How do I create staggered CSS animations using custom properties?▼

You can create staggered CSS animations using the Stagger Pattern, which leverages CSS custom properties alongside data-start, data-duration, and data-track-index for synchronized timing.

Why are my infinite CSS animations not seeking correctly during runtime?▼

Infinite CSS animations should be avoided for deterministic seeking unless WAAPI-backed handles are available, as they prevent consistent seeked states and break synchronization.

Does HyperFrames support triggering layout changes during CSS animation playback?▼

No, you should avoid triggering layout changes during CSS animation playback; the runtime is designed for decorative loops, masks, glow, and shimmer on properly placed DOM elements.

Related Skills

Explore More Design & Creative Skills→
wesleysimpliciowesleysimplicio
1

css-animations

Enable deterministic seeking of CSS keyframe animations within HyperFrames.

Community
Intermediate
zengxiaoqizengxiaoqi
1

three

Integrate Three.js scenes with HyperFrames' timeline for frame-synchronized WebGL rendering.

Community
Intermediate
MonichreMonichre

threejs-animation

Implement Three.js keyframe, skeletal, and morph target animations with AnimationMixer.

Community
Intermediate
boraoztuncboraoztunc
248

css-animations

Map DOM CSS animations to seekable handles for deterministic playback in HyperFrames.

Community
Intermediate