Description
css-animations is an agent skill from HeyGen's HyperFrames project that shows how to write CSS keyframe animations inside a composition so they can be seeked deterministically. HyperFrames seeks CSS animations through its css runtime adapter. The skill suits simple repeated motifs such as background motion, shimmer, glow, masks and decorative movement that does not need sequencing. For scene choreography across several elements the skill says GSAP is usually clearer, and CSS works best when the motion belongs to one element with a fixed duration. The contract lists the rules. The animated element must be in the DOM before runtime initialization finishes. Timed elements need a data-start value so their local animation time matches the clip. Use a finite animation-duration and animation-iteration-count, because the fallback that uses a negative animation delay cannot represent unbounded animation in environments without WAAPI-backed CSS animations. Prefer animation-fill-mode of both, so seeked states hold before and after the active motion. Avoid wall-clock JavaScript, hover-triggered state and class toggles that depend on user events. The adapter finds elements by their computed animation name and seeks their browser animation handles where available, falling back to pausing with a negative delay. It is for developers who want decorative CSS motion in a HyperFrames video that renders the same way every time. It passes Gen Agent Trust Hub, Socket and Snyk on skills.sh, and has about 72,000 installs. Install it with npx skills add https://github.com/heygen-com/hyperframes --skill css-animations.…
Highlights
- Seekable CSS keyframe animations for HyperFrames
- Simple repeated motion such as shimmer, glow and masks
- Requires data-start and finite duration and iteration count
- Prefers animation-fill-mode both for seeked states
Ratings & Reviews
No ratings yet
Be the first to rate css-animations.
People also visit
graphic-overlays
Package an existing talking-head / interview / podcast video by layering timed
css-animations FAQ
When should I use CSS instead of GSAP?
For motion that belongs to one element with a fixed duration. For choreography across several elements, the skill suggests GSAP.
Why does it need a data-start value?
So the element's local animation time matches the clip's timing.
Can the animation repeat forever?
No. It needs a finite duration and iteration count for the fallback to work.
How do I install it?
Run npx skills add https://github.com/heygen-com/hyperframes --skill css-animations.
Which security audits does it have?
On skills.sh, Gen Agent Trust Hub, Socket and Snyk all pass.
What are the best css-animations alternatives?
Popular alternatives to css-animations include slideshow, figma and animejs. See all css-animations alternatives