Agent skill

CSS Animations

CSS animation adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Apache-2.0Auto-check passedFrontend & Design

Install CSS Animations

skills CLI

$ npx skills add boraoztunc/skills --skill css-animations -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills css-animations --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/css-animations .claude/skills/css-animations && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "css-animations" agent skill from https://github.com/boraoztunc/skills/tree/main/css-animations into .claude/skills/css-animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "css-animations", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/boraoztunc/skills/tree/main/css-animations

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add boraoztunc/skills --skill css-animations -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills css-animations --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/css-animations .agents/skills/css-animations && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "css-animations" agent skill from https://github.com/boraoztunc/skills/tree/main/css-animations into .agents/skills/css-animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "css-animations", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add boraoztunc/skills --skill css-animations -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills css-animations --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/css-animations .cursor/skills/css-animations && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "css-animations" agent skill from https://github.com/boraoztunc/skills/tree/main/css-animations into .cursor/skills/css-animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "css-animations", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/boraoztunc/skills.git --path css-animations

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add boraoztunc/skills --skill css-animations -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills css-animations --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/css-animations .gemini/skills/css-animations && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "css-animations" agent skill from https://github.com/boraoztunc/skills/tree/main/css-animations into .gemini/skills/css-animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "css-animations", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install boraoztunc/skills css-animations

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add boraoztunc/skills --skill css-animations -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/css-animations .github/skills/css-animations && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "css-animations" agent skill from https://github.com/boraoztunc/skills/tree/main/css-animations into .github/skills/css-animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "css-animations", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add boraoztunc/skills --skill css-animations -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills css-animations --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/css-animations .opencode/skills/css-animations && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "css-animations" agent skill from https://github.com/boraoztunc/skills/tree/main/css-animations into .opencode/skills/css-animations/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "css-animations", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: css-animations
GitHub stars: 395
Used in: 2 other repos
Token cost: ~973 tokens
SKILL.md length: 265 words
Files: 1
Skills in repo: 52
Repo updated: Aug 15, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

CSS animation adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Authoring CSS keyframes
SKILL.md covers Contract, Basic Pattern, Stagger Pattern and Good Uses, plus 3 more sections
Calls npx
Animation-delay based timing

What it does

CSS Animations is an agent skill from boraoztunc/skills. CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

Its SKILL.md is about 970 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Web animation and motion and Motion graphics. It works with HeyGen. The repository describes itself as: Claude Code skills for copywriting, SEO, design, and more. The licence is Apache-2.0.

When your agent uses it

Authoring CSS keyframes
Animation-delay based timing
Animation-fill-mode
Animation-play-state

Example prompts

“/css-animations”

Requirements

Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 645553c. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- developer.mozilla.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

CSS Animations loads about 973 tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 265 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~66
When it runs · the whole SKILL.md, loaded when a task matches: ~973

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 265 words, ~973 tokens.

Download SKILL.mdSave it as .claude/skills/css-animations/SKILL.md (or your agent's skills folder).

name: css-animations
description: CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

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

Files

Just SKILL.md in css-animations of boraoztunc/skills.

Open the folder on GitHubat commit 645553c

Used in 2 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in boraoztunc/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

CSS Animations next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

CSS Animations compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
CSS Animations this skillboraoztunc/skills	395	2 repos	~973	Automated safety check: Pass	Apache-2.0	1 mo ago
Gsapalecs5am/ralphy	136	—	~2.4k	Automated safety check: Pass	Apache-2.0	15 days ago
Yuv Pilothoodini/ai-agents-skills	281	—	~4.7k	Automated safety check: Pass	None	2 mo ago
HyperFrames Animationheygen-com/hyperframes	59k	3 repos	~2.1k	Automated safety check: Pass	Apache-2.0	today
Yuv Viral Videohoodini/ai-agents-skills	281	—	~7.5k	Automated safety check: Notes	None	2 mo ago
Hyperframes Animationchmonitor/chmonitor	299	2 repos	~1.8k	Automated safety check: Pass	GPL-3.0	2 days ago

Similar skills

Gsap
alecs5am/ralphy
GSAP animation reference for HyperFrames. An agent skill from alecs5am/ralphy.
136 GitHub stars~2.4k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
Yuv Pilot
hoodini/ai-agents-skills
Top-of-pyramid orchestrator for Yuval Avidani's YUV.AI brand work.
281 GitHub stars~4.7k tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
59k GitHub starsUsed in 3 repos~2.1k tokens
Media & CreativeAuto-check passed
Yuv Viral Video
hoodini/ai-agents-skills
Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…
281 GitHub stars~7.5k tokensUpdated 2 mo ago
Media & CreativeAuto-check: notes
Hyperframes Animation
chmonitor/chmonitor
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus…
299 GitHub starsUsed in 2 repos~1.8k tokens
Media & CreativeAuto-check passed
Motion Frames
sanqiufong/slides-from-anything
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels.
132 GitHub starsUsed in 1 repo~910 tokens
Media & CreativeAuto-check passed

Questions about CSS Animations

What does CSS Animations do?

CSS animation adapter patterns for HyperFrames. An agent skill from boraoztunc/skills. CSS Animations is an agent skill from boraoztunc/skills. CSS animation adapter patterns for HyperFrames.

When should I use CSS Animations?

CSS Animations fits situations like: authoring CSS keyframes; animation-delay based timing; animation-fill-mode; animation-play-state.

How do I install CSS Animations in Claude Code?

Run `npx skills add boraoztunc/skills --skill css-animations -a claude-code`. Or copy the skill folder (css-animations in boraoztunc/skills) into .claude/skills/css-animations in your project. Claude Code loads it when a task matches its description.

How do I install CSS Animations in Codex?

Run `npx skills add boraoztunc/skills --skill css-animations -a codex`. Or copy the skill folder (css-animations in boraoztunc/skills) into .agents/skills/css-animations in your project. Codex loads it when a task matches its description.

Can I use CSS Animations in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add boraoztunc/skills --skill css-animations -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/css-animations, .gemini/skills/css-animations, .github/skills/css-animations and .opencode/skills/css-animations in your project.

What does CSS Animations need to run?

Going by SKILL.md and its folder, CSS Animations needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does CSS Animations access the network?

SKILL.md names 1 domain. As links in the text: developer.mozilla.org. This is read from the text; nothing was executed.

Is CSS Animations safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does CSS Animations use?

CSS Animations is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does CSS Animations use?

About 973 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to CSS Animations?

Skills that share tags, products or a category with CSS Animations: Gsap (alecs5am/ralphy, 136 stars), Yuv Pilot (hoodini/ai-agents-skills, 281 stars), HyperFrames Animation (heygen-com/hyperframes, 59k stars) and Yuv Viral Video (hoodini/ai-agents-skills, 281 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains CSS Animations?

boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 395 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on August 15, 2026.

Source: boraoztunc/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install CSS Animations

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

CSS Animations for HyperFrames

Contract

Basic Pattern

Stagger Pattern

Good Uses

Avoid

Validation

Credits And References

Files

Used in 2 other repositories

Compare with similar skills

Similar skills

More from boraoztunc/skills

Related

Questions about CSS Animations