css-animation-patterns
CSS animations, transitions, keyframes, and modern motion APIs. Use when adding animations, transitions, scroll-driven effects, or view transitions. Use for css-animation, transition, keyframes, view-transitions, scroll-animation, transform, motion-preference, animation-timeline.
- Installs
- 178
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads css-animation-patterns automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
Exploreagent to discover patterns in reference files - Performance audit: Use
Taskagent to review animation performance across components - Accessibility review: Use
Taskagent to verifyprefers-reduced-motioncoverage - Code review: Delegate to
code-revieweragent for animation-related PR reviews
If the
ux-designerskill is available, delegate visual motion design decisions to it. Otherwise, recommend:npx skills add oakoss/agent-skills --skill ux-designer
References
- Transitions, keyframes, and animation properties
- Transforms and performance optimization
- Scroll-driven animations
- View Transitions API
FAQ
What does the css-animation-patterns skill do?
CSS animations, transitions, keyframes, and modern motion APIs. Use when adding animations, transitions, scroll-driven effects, or view transitions. Use for css-animation, transition, keyframes, view-transitions, scroll-animation, transform, motion-preference, animation-timeline.
How do I install css-animation-patterns?
Run npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/css-animation-patterns/ (personal) or .claude/skills/css-animation-patterns/ (project).
Which AI agents can use css-animation-patterns?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is css-animation-patterns safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains css-animation-patterns?
It is published by oakoss in oakoss/agent-skills. It has 178 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
find-skills
oakoss/agent-skills
Discovers and installs agent skills from the open ecosystem. Enriches search results with descriptions fetched from skills.sh. Use when a user asks "how do I do X", "find a skill for X", "is there a skill that can...", or wants to extend agent capabilities. Use for skill discovery, skill search, skill install, finding tools.
drizzle-orm
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
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 Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.