animation-creator

CSS animations perform best when using compositor-only properties like transform and opacity, which skip layout calculations. This Skill generates optimized @keyframes and transitions that avoid expensive properties, apply will-change hints strategically, and deliver smooth 60fps micro-interactions without repaints.

Animations must honor user motion preferences to meet accessibility standards. This Skill enforces prefers-reduced-motion by producing CSS that disables or simplifies animations when users request reduced motion, ensuring animations enhance rather than obstruct the experience.

Button micro-interactions should be subtle, instant, and accessible. This Skill generates hover lift effects with shadow depth, focus outlines, and transition timing that feel responsive without distraction, using transform sequences and opacity fades for performance.

Yes, CSS keyframes and transitions work well for entrance animations and page transitions. This Skill creates optimized fade, slide, and scale sequences for modals and route changes, with proper timing and easing to guide user attention and maintain perceived performance.

Animating layout properties like width, height, or left triggers expensive reflows. This Skill avoids those properties and instead uses compositor-only transforms and opacity changes, which render on the GPU and preserve 60fps motion without layout thrash.

Loading spinners need motion that doesn't trigger seizures and respects prefers-reduced-motion. This Skill generates smooth CSS keyframe rotations with appropriate timing and applies accessibility controls to disable or simplify animation for users who request reduced motion.