CSS Animations for HyperFrames 是一套面向 HyperFrames 的 CSS 动画适配器使用模式。HyperFrames 可以通过其 CSS 运行时适配器对 CSS 关键帧动画进行 seek（跳转定位）。这类动画适合用于简单的重复图形、背景运动、微光（shimmer）、发光（glow）、遮罩（masks）以及非顺序性的装饰效果。
用途与定位
对于场景编排（scene choreography），通常使用 GSAP 会更清晰。CSS 动画则在运动归属于单个元素且具有固定时长时效果最佳。
适配器行为
适配器会查找计算后存在 animation-name 的元素，在可用时定位其浏览器 Animation 句柄，并在不可用时回退为通过负 animation-delay 进行暂停。
契约要求
- 在运行时初始化完成之前，将需要动画的元素放入 DOM。
- 为计时元素提供 data-start 值，使本地动画时间与片段（clip）匹配。
- 使用有限的 animation-duration 和 animation-iteration-count，因为在没有 WAAPI 支持的 CSS 动画的环境中，负延迟回退方案无法表示无限时长。
- 优先使用 animation-fill-mode: both，使 seek 后的状态在活动运动前后都能保持。
- 避免使用真实时钟（wall-clock）的 JavaScript、悬停触发的状态，以及依赖用户事件的类名切换。
基础模式示例
<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); animation-iteration-count: 3; animation-fill-mode: both; }
@keyframes pulse-ring { from { opacity: 0; transform: scale(0.82); } 35% { opacity: 1; } to { opacity: 0; transform: scale(1.18); } } </style>
错峰（Stagger）模式
使用 CSS 自定义属性来避免重复定义关键帧：
<div class="clip dots" data-start="1" data-duration="3" data-track-index="3"> <span style="--i: 0"></span> <span style="--i: 1"></span> <span style="--i: 2"></span> </div>
<style> .dots span { display: inline-block; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%; background: currentColor; animation: dot-pop 900ms ease-out both; animation-delay: calc(var(--i) * 120ms); }
@keyframes dot-pop { from { opacity: 0; transform: translateY(18px) scale(0.75); } to { opacity: 1; transform: translateY(0) scale(1); } } </style>
适合使用的场景
- 具有已知重复次数的装饰性循环动画。
- 遮罩、发光、微光、颗粒以及细微的视差层。
- 单个元素的简单入场动画，使用完整 JS 时间线会显得过重时。
应避免的做法
- 除非已验证浏览器提供可 seek 的 WAAPI 支持的 CSS 动画句柄，否则避免无限循环的 CSS 动画。优先使用覆盖可见时长的有限迭代次数。
- 在 transform 可用时，避免对 top、left、width、height 等布局属性做动画。
- 避免依赖 hover、focus、scroll 或媒体查询来触发对渲染关键的运动。
- 除非有另一个确定性时间线控制该变化，否则避免在启动后更改动画类名。
校验
编辑 CSS 动画组合后：
npx hyperframes lint npx hyperframes validate
相关来源
HyperFrames 适配器源码：packages/core/src/runtime/adapters/css.ts。
MDN CSS 动画文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
MDN animation-fill-mode：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode