Self-hosted alternatives to css-animations

C

css-animations

CSS keyframe animations for HyperFrames

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.