css-animationslisted

# 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 ```html <div id="pulse-ring" class="clip pulse-ring" data-start="0" data-duration="4" data-track-index="2" ></div> <style> .pulse-ring { width: 280px; height: 280px; border: 4px solid rgba(255, 255, 255, 0.7); border-radius: 50%; animation-name: pulse-ring; animation-duration: 1200ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1);