---
id: gh-css-animations
name: "css-animations"
url: https://skills.yangsir.net/skill/gh-css-animations
author: heygen-com
domain: ai-frontend-engineering
tags: ["css", "animation", "frontend", "hyperframes", "motion-graphics"]
install_count: 38200
rating: 4.60 (120 reviews)
github: https://github.com/heygen-com/hyperframes/tree/main/skills/css-animations
---

# css-animations

> 为 HyperFrames 提供 CSS 动画适配模式，支持确定性地查找 CSS 关键帧、动画延迟和填充模式，用于预览和渲染。适用于简单的、固定时长的装饰性动画，如循环、遮罩和微妙的视差效果。

**Stats**: 38,200 installs · 4.6/5 (120 reviews)

## Before / After 对比

### 提升 CSS 动画渲染一致性

**Before**:

在视频或动画项目中，手动集成和同步 CSS 动画常导致播放不一致、难以精确控制时间轴，尤其在预览和最终渲染时，动画行为可能不确定，耗费大量时间进行调试和调整。

**After**:

借助 HyperFrames CSS 适配器，CSS 动画能够被确定性地查找和渲染，确保预览与最终输出完全一致。这极大地减少了调试时间，提高了动画制作的效率和可靠性。

| Metric | Before | After | Change |
|---|---|---|---|
| 调试时间 | 120分钟 | 10分钟 | -91% |

## Readme

# 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);
    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 Pattern

Use CSS custom properties to avoid duplicating keyframes:

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

## Good Uses

- Decorative loops with a known repeat count.
- Mask, glow, shimmer, grain, and subtle parallax layers.
- Simple one-element entrances where a full JS timeline would be excessive.

## Avoid

- Infinite CSS animations unless you have verified the browser exposes seekable WAAPI-backed CSS animation handles. Prefer a finite iteration count covering the visible duration.
- Animating layout properties like `top`, `left`, `width`, or `height` when transforms work.
- Relying on hover, focus, scroll, or media queries to trigger render-critical motion.
- Changing animation classes after startup unless another deterministic timeline controls that change.

## Validation

After editing CSS animation compositions:

```bash
npx hyperframes lint
npx hyperframes validate
```

## Credits And References

- HyperFrames adapter source: `packages/core/src/runtime/adapters/css.ts`.
- MDN CSS animation documentation: 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


---
*Source: https://skills.yangsir.net/skill/gh-css-animations*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-css-animations/markdown*