CSS-Animationen, Übergänge, Keyframes und moderne Motion-APIs. Zum Hinzufügen von Animationen, Übergängen, scrollgesteuerten Effekten oder Ansichtsübergängen. Verwendung für CSS-Animation, Übergang, Keyframes, Ansichtsübergänge, Scroll-Animation, Transformation, Bewegungseinstellung, Animationszeitleiste.
Installieren Sie den KI-Skill css-animation-patterns schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: oakoss/agent-skills.
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.
CSS-Animationen, Übergänge, Keyframes und moderne Motion-APIs. Zum Hinzufügen von Animationen, Übergängen, scrollgesteuerten Effekten oder Ansichtsübergängen. Verwendung für CSS-Animation, Übergang, Keyframes, Ansichtsübergänge, Scroll-Animation, Transformation, Bewegungseinstellung, Animationszeitleiste. Quelle: oakoss/agent-skills.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patternsCSS-Animationen, Übergänge, Keyframes und moderne Motion-APIs. Zum Hinzufügen von Animationen, Übergängen, scrollgesteuerten Effekten oder Ansichtsübergängen. Verwendung für CSS-Animation, Übergang, Keyframes, Ansichtsübergänge, Scroll-Animation, Transformation, Bewegungseinstellung, Animationszeitleiste. Quelle: oakoss/agent-skills.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/oakoss/agent-skills