Globales Ranking · von 601 Skills
css-animation-patterns AI Agent Skill
Quellcode ansehen: oakoss/agent-skills
SafeInstallation
npx skills add oakoss/agent-skills --skill css-animation-patterns 48
Installationen
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
Installationen
Sicherheitsprüfung
Quellcode ansehen
oakoss/agent-skills
Mehr aus dieser Quelle
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
So verwenden Sie diesen Skill
Install css-animation-patterns by running npx skills add oakoss/agent-skills --skill css-animation-patterns in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.
Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.
Der Skill verbessert das Verständnis Ihres Agenten für css-animation-patterns, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.
Was Sie erhalten
Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.
Kompatibilität
Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
