研究检索敏感数据github未标认证来源可访问许可证需确认审计通过

css-animation-patterns（CSS animation 模式）

Agent Skill

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

总安装

1,141

周安装

GitHub Stars

下载量

211

CodexClaudeCursorGemini CLI

安装说明

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

GitHub

来源数

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 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

简介

提供现代 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，接入前应确认版本、权限和运行环境要求。

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

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35%

按下载量换算74

Claude

28.31%

按下载量换算60

Cursor

20.7%

按下载量换算44

Gemini CLI

8.79%

按下载量换算19

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

敏感数据

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

安装前确认

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

来源信息

GitHub 仓库

github.com

/oakoss/agent-skills

SKILL.md 来源

github.com

/oakoss/agent-skills/tree/main/skills/css-animation-patterns

skills-sh

skills.sh

/oakoss/agent-skills/css-animation-patterns

继续浏览同类 Skills

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

上一个 Skill

css-animation（CSS animation 搜索）

下一个 Skill

css-animations（CSS animations 前端）