Css Animations — CSS 动画

HyperFrames 的 CSS 动画 HyperFrames 可以通过其 CSS 运行时适配器寻找 CSS 关键帧动画。使用此功能实现简单的重复图案、背景运动、闪烁、发光、遮罩和非序列装饰。对于场景编排，GSAP 通常更清晰。CSS 动画在运动属于一个元素并且有固定持续时间时效果最佳。

约定 将动画元素放在 DOM 中，在运行时初始化完成之前。为计时元素赋予 data-start 值，以使本地动画时间与剪辑匹配。使用有限的 animation-duration 和 animation-iteration-count，因为负延迟回退不能在没有 WAAPI 支持的 CSS 动画的环境中表示无限持续时间。更喜欢 animation-fill-mode: both，以便在活动运动之前和之后保留寻找状态。避免使用 wall-clock JavaScript、hover 触发状态和依赖于用户事件的类切换。适配器发现具有计算 animation-name 的元素，在可用时寻找其浏览器动画句柄，并回退到使用负动画延迟暂停。

基本模式

.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);
  }
}

阶梯模式 使用 CSS 自定义属性避免重复关键帧：

.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);
  }
}

良好的用途 已知重复次数的装饰循环。遮罩、发光、闪烁、颗粒和微妙的视差层。简单的单元素入口，不需要完整的 JS 时间轴。避免使用无限的 CSS 动画，除非您已验证浏览器暴露了可寻址的 WAAPI 支持的 CSS 动画句柄。更喜欢有限的迭代次数，涵盖可见持续时间。使用变换时的布局属性，如 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 GitHub：https://github.com GSAP：https://greensock.com/gsap/ API：https://developer.mozilla.org/en-US/docs/Web/API CLI：https://en.wikipedia.org/wiki/Command-line_interface WAAPI：https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API