CSS Animations

Builds performant, accessible CSS animations using @keyframes, transitions, and modern animation APIs. Covers entrance/exit animations, loading indicators, micro-interactions, scroll-driven animations, view transitions, staggered animation sequences, and motion-reduced alternatives. Focuses on GPU-accelerated properties for smooth 60fps performance.

Usage

Describe the animation effect you want to create: what triggers it, what properties change, and the desired timing and feel. Specify whether it should be a one-time animation or continuous, and any accessibility considerations. The skill generates CSS animation code with proper timing functions and performance optimizations.

Examples

• "Create a fade-in-up entrance animation for cards that triggers when they scroll into view"
• "Build a loading spinner with three bouncing dots that has smooth, organic motion"
• "Design a button hover effect with a background gradient slide and subtle scale transform"
• "Create a page transition animation that slides content out and the new page in from the right"

Guidelines

• Animate only transform and opacity for GPU-accelerated, 60fps performance (avoid top, left, width, height)
• Use will-change sparingly and only on elements about to animate, remove it after animation completes
• Provide prefers-reduced-motion: reduce alternatives that remove or simplify all motion animations
• Use cubic-bezier timing functions for natural-feeling motion instead of linear or basic ease
• Keep animations under 300ms for UI feedback (hover, click) and 300-500ms for transitions (page, modal)
• Use animation-fill-mode: forwards to persist the final state, backwards to apply initial state during delay
• Stagger child animations with animation-delay or custom properties for sequential reveal effects
• Use @starting-style and transition-behavior: allow-discrete for animating to/from display: none