CSS Animation Generator
Create CSS keyframe animations visually — control timing, easing, direction, and generate @keyframes CSS.
About CSS Animations
CSS animations allow elements to transition between styles over time without JavaScript. They consist of two parts: the animation shorthand property (applied to the element) and the @keyframes rule (defines the animation steps). Keyframes use percentages (0% = start, 100% = end) or from/to keywords.
The animation shorthand accepts: name, duration, timing-function, delay, iteration-count, direction, fill-mode, and play-state. fill-mode: forwards retains the final keyframe state after the animation ends. animation-play-state: paused/running enables JavaScript-controlled pause/resume.
FAQ
When should I use CSS animations vs JavaScript?
Prefer CSS animations for entrance/exit effects, loading indicators, hover states, and simple transitions. They run on the compositor thread (bypassing the main JS thread) for smoother 60fps performance. Use JavaScript (GSAP, Web Animations API) for complex sequences, physics-based animations, SVG path animations, or when you need programmatic control.
How do I pause and resume a CSS animation?
Set animation-play-state: paused to pause and animation-play-state: running to resume. In JavaScript: element.style.animationPlayState = "paused". This works for both CSS animations and CSS transitions.