# Create Seekable CSS Animations for HyperFrames

CSS animations can drift when previews and renders seek through time. This skill shows deterministic patterns for keyframes, timing, fill modes, and validation.

## Install

```bash
npx skillstore add heygen-com/css-animations
```

## Metadata

- Status: approved
- Slug: heygen-com-css-animations
- Skillstore revision: r1
- Version status: missing
- Tree hash: 28f7fc2904777de6083eaf40ecaf345e5a9b7774b13b69d9d4eb9e3ed982b50d
- Author: heygen-com
- GitHub username: heygen-com
- License: MIT
- Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/css-animations/
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/heygen-com-css-animations
- Manifest: https://skillstore.pages.dev/api/skills/heygen-com-css-animations/manifest

## Capabilities

- Explains when to use the HyperFrames CSS runtime adapter.
- Shows how to make CSS keyframes seekable with fixed durations.
- Provides a basic pulse ring pattern for deterministic rendering.
- Provides a staggered animation pattern using CSS custom properties.
- Lists validation commands for HyperFrames animation compositions.
- Highlights animation patterns that can break render determinism.

## Use Cases

- Add Render-Safe Motion: Create CSS keyframe effects that stay stable during HyperFrames preview and render seeking.
- Review Animation Timing: Check durations, fill modes, delays, and iteration counts before a video composition is rendered.
- Standardize Team Patterns: Give contributors shared examples for simple loops, shimmer, glow, masks, and staggered elements.

## Prompt Templates

### Create a Basic Keyframe Effect

```
Create a HyperFrames CSS animation pattern for a single element. Use fixed duration, finite iterations, data-start, and animation-fill-mode.
```

### Convert an Existing CSS Animation

```
Review this CSS animation for HyperFrames. Make it deterministic and explain any changes to duration, delay, fill mode, and iteration count.
```

### Design a Staggered Motion Pattern

```
Create a staggered HyperFrames CSS animation using custom properties. Keep timing seekable and avoid event-driven state changes.
```

### Audit a Render-Critical Composition

```
Audit this HyperFrames composition for CSS animation risks. Identify non-deterministic triggers, infinite loops, layout animation, and validation steps.
```

## Limitations

- It covers CSS animation patterns, not full JavaScript timeline design.
- It assumes a HyperFrames project and CSS adapter context.
- It does not generate production assets or visual designs by itself.
- It relies on browser animation behavior and HyperFrames validation.

## Best Practices

- Use finite durations and iteration counts for render-critical CSS motion.
- Set animation-fill-mode so seeked states hold before and after movement.
- Validate the composition after changing keyframes, delays, or timing.

## Anti Patterns

- Do not rely on hover, focus, scroll, or media queries for render-critical motion.
- Do not animate layout properties when transform or opacity can produce the same effect.
- Do not use infinite CSS animations unless seekable browser animation handles are verified.

## Security Audit

- Audited at: 2026-07-09T11:51:10.536\+00:00
- Summary: The static findings are false positives caused by Markdown inline code, fenced code blocks, fixed validation commands, and reference links. I found no prompt injection, data exfiltration intent, dynamic command construction, or other malicious behavior in SKILL.md.

## Stats

- Views: 29
- Downloads: 6
- Favorites: 0
- Popularity score: 0