css-animations

HyperFrames 的 CSS 动画

HyperFrames 可以通过其 css 运行时适配器控制 CSS 关键帧动画的播放进度。适用于简单的重复图案、背景运动、闪烁、发光、遮罩和非序列装饰。

对于场景编排，GSAP 通常更清晰。CSS 动画最适合运动仅涉及一个元素且时长固定的情况。

约定

• 在运行时初始化完成前，将动画元素放入 DOM。
• 为定时元素设置 data-start 值，使本地动画时间与片段匹配。
• 使用有限的 animation-duration 和 animation-iteration-count，因为在不支持基于 WAAPI 的 CSS 动画的环境中，负延迟回退方案无法表示无限时长。
• 优先使用 animation-fill-mode: both，使跳转到指定时间后的状态在动画开始前和结束后都能保持。
• 避免使用墙上时钟 JavaScript、悬停触发状态，以及依赖用户事件切换的类。

适配器会查找计算后具有 animation-name 的元素，在可能时控制其浏览器 Animation 句柄的播放进度；否则会暂停动画并使用负的 animation-delay 作为回退方案。

基本模式

<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>

错开模式

使用 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 时间轴。

避免

• 使用无限 CSS 动画，除非已确认浏览器会公开可跳转的、基于 WAAPI 的 CSS 动画句柄。优先使用覆盖可见时长的有限迭代次数。
• 在可以使用变换时，避免为 top、left、width 或 height 等布局属性制作动画。
• 依赖悬停、焦点、滚动或媒体查询来触发渲染关键动画。
• 启动后更改动画类，除非这一更改由另一个确定性时间轴控制。

验证

编辑 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