Agent Skill · 研究检索

css-animation-patterns（CSS animation 模式）

用于辅助视频生成、动画合成、脚本化剪辑或 Remotion 等视频项目开发。它适合让 Agent 组织镜头、生成素材说明、维护合成代码或排查渲染问题。使用时需要确认分辨率、时长、素材路径和导出格式；涉及外部素材、人物肖像或商业发布时，应先核对版权授权和内容审核要求。

css-animation-patterns 是研究检索类 Agent Skill，可用宿主为 Codex、Claude、Cursor、Gemini CLI，通过GitHub 仓库获取，权限为接触敏感数据；许可证信息还不明确，第三方扫描已通过，按安装量在研究检索类的 73,675 个 Skill 里排第 41,754。

总安装 1,141周安装 49GitHub Stars 10下载 211核验 2026-05-01

研究检索接触敏感数据 GitHub 仓库未标认证来源可访问许可证需确认审计通过 Codex Claude Cursor Gemini CLI

安装说明

本站只整理中文说明，不托管安装包，也不代用户安装。

GitHub

许可证: unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：css-animation-patterns（CSS animation 模式）
来源仓库：https://github.com/oakoss/agent-skills
仓库路径：skills/css-animation-patterns
安装命令：
npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns

这个 Skill 是做什么的

研究检索类 Skill 主要解决「找资料、核对事实、把来源整理清楚」的问题，通常会让助手先检索再总结。

提供现代 CSS 动画模式指南，涵盖关键帧、变换和滚动驱动动画。强调仅对复合属性（如 transform、opacity）进行动画以实现 60fps 流畅度。集成 prefers-reduced-motion 支持，确保无障碍体验。

安装命令：npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns 适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。

来源仓库内路径：skills/css-animation-patterns

上手步骤

4 步

1
确认自己的宿主工具
公开资料标注支持 Codex、Claude、Cursor、Gemini CLI；先确认自己用的是其中之一，再按对应工具的 Skills 目录放置。
2
拿到安装命令
可以直接复制的命令是 npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patt…；命令里的占位符换成自己的路径或密钥再执行。
3
安装后重启宿主
命令执行完要完全退出宿主工具再打开，让新装的 Skill 被重新扫描到，否则列表里可能看不到。
4
按最小权限试用
它需要接触敏感数据，先在测试目录或测试账号里跑，确认没问题再放到正式项目。

常见问题

6 条

css-animation-patterns 怎么安装？

在终端执行 npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns。装完完全退出宿主工具再打开，让它重新扫描本地 Skill。

css-animation-patterns 支持哪些 AI 工具？

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录，一般也能手动放进去，但要自己确认触发方式是否一致。

css-animation-patterns 需要什么权限？

权限级别是接触敏感数据。该 Skill 可能接触密钥、Token、环境变量或敏感配置，应进入高风险复核队列，默认不自动发布。

css-animation-patterns 是免费的吗？

公开资料没有标注明确许可证，收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

css-animation-patterns 用的人多吗？

公开数据是累计安装 1,141 次，近一周安装 49 次，下载 211 次，GitHub 10 星。这些数字来自第三方目录统计，只能当作热度参考，不代表质量或安全性。

css-animation-patterns 安全吗？

第三方扫描结果为通过，但这只覆盖已知的静态检查项，不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

同时适配 4 种工具，换客户端不用重新找替代品。
第三方扫描已通过，常见的高风险行为没有命中。

先想清楚的地方

需要接触敏感数据，装到常用环境前要先评估影响面。
许可证没有明确标注，能不能商用、能不能再分发都不确定。
第三方目录整理，版本更新和行为细节以来源仓库为准。

适不适合你

更适合

已经在用 Codex，想直接扩展它能力的人。
需要处理研究检索类任务、又不想每次都手写提示词的人。

不太适合

环境里有大量密钥、凭证，不方便给第三方 Skill 读取的人。
需要明确授权才能用到公司项目里的场景。
需要厂商级技术支持和 SLA 的生产系统。

研究检索类 Skill 对比

6 个同类

Skill	总安装	GitHub 星	权限	许可证	扫描
find-skills 寻找技能 · Codex、Claude	31,199,813	16,486	操作浏览器	MIT	有提醒
self-improving-agent 自我改进 Agent · OpenClaw	16,464,002	3,396	接触敏感数据	MIT-0	通过
soultrace 灵魂追踪 · Codex、Claude	7,588,944	12	需要联网	未明确	有提醒
self-improving 自我完善 · OpenClaw	6,829,284	1,046	需要联网	MIT-0	通过
microsoft-foundry 微软代工厂 · Codex、Claude	6,614,144	764	调用外部服务	未明确	有提醒
css-animation-patterns CSS animation 模式 · 本页	1,141	10	接触敏感数据	未明确	通过

按安装量取同分类前几名；数字来自第三方目录统计，只作热度参考，不代表质量结论。

SKILL.md 原文

CSS Animation Patterns

Overview

CSS animations and transitions provide hardware-accelerated motion for web interfaces using keyframes, transitions, transforms, and modern scroll-driven and view transition APIs. Animate only composite properties (transform, opacity, filter) for smooth 60fps performance, and always respect prefers-reduced-motion.

The browser rendering pipeline has four stages: Style, Layout, Paint, and Composite. Animating composite-only properties skips Layout and Paint entirely, running on the GPU compositor thread. This is the single most important performance principle for CSS animation.

Modern CSS adds two powerful APIs: scroll-driven animations link keyframe progress to scroll position or element visibility instead of time, and the View Transitions API creates snapshot-based animated transitions between DOM states for both SPAs and MPAs.

When to use: Element state changes, page transitions, scroll-linked effects, loading indicators, micro-interactions, route change animations, reveal-on-scroll patterns, parallax effects, progress indicators tied to scroll.

When NOT to use: Complex physics simulations (use a JS animation library), canvas/WebGL rendering, animations requiring frame-by-frame scripted control (use Web Animations API directly), highly interactive drag-and-drop (use pointer events with JS).

Browser Support Summary

Feature	Chrome	Firefox	Safari
Transitions, keyframes, transforms	Full	Full	Full
Individual transform properties	104+	72+	14.1+
`@starting-style`	117+	129+	17.5+
`transition-behavior: allow-discrete`	117+	129+	17.4+
Scroll-driven animations	115+	Not yet	26+
Same-document view transitions	111+	144+	18+
Cross-document view transitions	126+	Not yet	18+
`view-transition-class`	125+	144+	18+

Use @supports for progressive enhancement with newer features. Always provide a functional non-animated fallback.

Quick Reference

Pattern	API	Key Points
State transition	`transition: property duration easing`	Triggers on property change, composite-only for performance
Discrete transition	`transition-behavior: allow-discrete`	Enables transitions on `display`, `visibility`
Entry animation	`@starting-style {...}`	Initial state for elements appearing in DOM
Keyframe animation	`@keyframes name` + `animation` shorthand	Multi-step sequences, supports `forwards` fill mode
Transform	`transform: translate() scale() rotate()`	GPU-composited, no layout recalculation
Individual transforms	`translate`, `rotate`, `scale`	Independently animatable with different timings
Scroll progress	`animation-timeline: scroll()`	Links animation to scroll position of a container
View progress	`animation-timeline: view()`	Links animation to element visibility in scrollport
Animation range	`animation-range: entry 0% entry 100%`	Controls which timeline segment drives animation
Named scroll timeline	`scroll-timeline-name` + `scroll-timeline-axis`	Reusable scroll timeline across elements
Named view timeline	`view-timeline-name` + `view-timeline-axis`	Reusable view timeline for visibility tracking
View transition (SPA)	`document.startViewTransition(callback)`	Snapshot-based animated DOM updates
View transition (MPA)	`@view-transition {navigation: auto}`	Cross-document transitions, same-origin only
Transition naming	`view-transition-name: hero`	Identifies elements for independent transition groups
Transition classes	`view-transition-class: card`	Groups named elements for shared transition styles
Transition types	`startViewTransition({types: [...]})`	Conditional styling based on navigation direction
GPU hint	`will-change: transform`	Promotes element to compositor layer, use sparingly
Motion preference	`@media (prefers-reduced-motion: reduce)`	Disable or simplify animations for accessibility
Custom easing	`cubic-bezier()` or `linear()`	Fine-tuned timing curves, `linear()` for multi-point easing
Step easing	`steps(n, jump-term)`	Frame-by-frame discrete animation
Animation composition	`animation-composition: accumulate`	Controls how multiple animations combine on same property
Staggered delay	`animation-delay: calc(var(--i) * 60ms)`	Per-element delay using CSS custom properties
Render containment	`contain: layout style`	Isolates rendering scope for better animation perf
Content visibility	`content-visibility: auto`	Skips rendering of off-screen content

Common Mistakes

Mistake	Correct Pattern
Animating `width`, `height`, `top`, `left`	Use `transform: translate()` and `scale()` for layout-free animation
Adding `will-change` to every element	Apply only to elements that animate frequently, remove after animation
Missing `prefers-reduced-motion` handling	Wrap motion in `@media (prefers-reduced-motion: no-preference)`
Using `translateZ(0)` hack everywhere	Use `will-change` instead, and only when needed
Declaring `animation-timeline` before `animation` shorthand	Declare `animation-timeline` after `animation` (shorthand resets it to `auto`)
Setting `animation-duration` for scroll-driven animations	Duration is scroll-controlled; use `auto` or omit, set `1ms` for Firefox compat
Forgetting `view-transition-name` must be unique	Each participating element needs a distinct name per page snapshot
Not providing fallbacks for scroll-driven animations	Use `@supports (animation-timeline: scroll())` for progressive enhancement
Animating `background-color` expecting GPU compositing	Only `transform`, `opacity`, and `filter` are reliably GPU-composited
Using `transition: all`	Specify exact properties to avoid unexpected transitions and performance hits
Interleaving DOM reads and writes in JS animations	Batch reads first, then writes, or use `requestAnimationFrame`
Not using `flushSync` with React view transitions	React batches updates; wrap `navigate()` in `flushSync` inside the callback
Calling `startViewTransition` without feature check	Always guard with `if (!document.startViewTransition)` fallback

Delegation

Animation implementation: Use Explore agent to discover patterns in reference files
Performance audit: Use Task agent to review animation performance across components
Accessibility review: Use Task agent to verify prefers-reduced-motion coverage
Code review: Delegate to code-reviewer agent for animation-related PR reviews

If the ux-designer skill is available, delegate visual motion design decisions to it. Otherwise, recommend: npx skills add oakoss/agent-skills --skill ux-designer

References

平台分布

Codex

35%

按下载量换算74

Claude

28.31%

按下载量换算60

Cursor

20.7%

按下载量换算44

Gemini CLI

8.79%

按下载量换算19

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

接触敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置，应进入高风险复核队列，默认不自动发布。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源，建议同时核对源仓库。

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

css-animation（CSS animation 搜索）

neonwatty/css-animation-skill

下一个 Skill

css-animations（CSS animations 前端）

heygen-com/hyperframes