CSS Animation Generator

GPU-accelerated properties (fast, smooth): transform (translate, rotate, scale, skew), opacity. These trigger composite-only (no layout or paint). Good properties (acceptable): filter (blur, brightness), background-color (paint layer). Avoid (expensive, janky): width, height, margin, padding (trigger layout reflow), top, left, right, bottom on non-positioned elements (cause paint), box-shadow (expensive paint). Rule: transform and opacity for motion, everything else sparingly. Use transform: translateX() instead of left, transform: scale() instead of width. Test animations with browser DevTools Performance panel - green = good, red = janky.

Timing functions control acceleration/deceleration of animation. linear: constant speed, no acceleration (robotic feel). ease (default): slow start, fast middle, slow end (natural feel, most common). ease-in: slow start, accelerate to end (falling object). ease-out: fast start, decelerate to end (arriving object, most pleasant for UI). ease-in-out: slow start and end, fast middle (symmetrical). cubic-bezier(x1, y1, x2, y2): custom curve (use cubic-bezier.com to design). steps(n): jumpy animation in n discrete steps (frame-by-frame sprite animations). For UI: ease-out for entrances, ease-in for exits, ease for loops. Elastic/bounce require custom cubic-bezier or keyframe complexity.

Control with animation-iteration-count property. One-time: animation-iteration-count: 1 (default). Infinite loop: animation-iteration-count: infinite (loading spinners, background effects). Specific count: animation-iteration-count: 3 (plays 3 times then stops). Combine with animation-fill-mode for end state behavior: forwards (stays at 100% keyframe after ending), backwards (jumps to 0% immediately), both (combines forwards + backwards). Common patterns: loading spinner = iteration-count: infinite + linear timing, button click = iteration-count: 1 + forwards, attention-seeker = iteration-count: 3 + normal direction. Infinite animations use battery - use sparingly on mobile.

Yes. CSS: animation-play-state: paused; (stops animation, holds current position). Change to running to resume. JavaScript: element.style.animationPlayState = "paused"; and "running". Use cases: pause animations when tab is inactive (performance), stop on hover for inspection, create playback controls. Advanced: use CSS variables with JavaScript to dynamically control animation properties: @keyframes { 0% { transform: translateX(var(--start)); } }. Or use Web Animations API (element.animate()) for full programmatic control: pause(), play(), reverse(), currentTime. Modern approach: prefer Web Animations API for JS-controlled animations, use CSS animations for declarative effects.

Staggered delays: Apply same animation to multiple elements with increasing animation-delay. .item:nth-child(1) { animation-delay: 0s; } .item:nth-child(2) { animation-delay: 0.1s; } .item:nth-child(3) { animation-delay: 0.2s; } creates cascade effect. Sequential chain: Use animation-delay equal to previous animation's duration: Element 1: animation: anim1 1s; Element 2: animation: anim2 1s 1s (starts after 1s). Listen for animationend event in JavaScript to trigger next animation programmatically. Synchronized parallel: Use same duration and delay for simultaneous animations. Web Animations API provides precise control: element.animate().finished.then(() => nextAnimation()). Modern: use GSAP or Motion One libraries for complex animation orchestration.

Causes and fixes: Animating expensive properties (width, height, margin) - use transform instead for GPU acceleration. Too long animation on many elements - limit concurrent animations, use will-change: transform; (sparingly) to hint browser for optimization. Missing hardware acceleration - ensure transform: translateZ(0) or will-change triggers GPU layer. Low-end device - reduce animation complexity, use prefers-reduced-motion media query to disable for accessibility. 60fps frame drops - simplify keyframes, reduce animated elements, profile with DevTools. High resolution displays - test on actual devices, not just DevTools emulation. Modern approach: animate only transform and opacity, keep animations under 500ms for snappiness, respect user motion preferences.