CSS Animation Generator
Generate CSS @keyframes animations - 16 presets, full duration/timing/delay/direction/fill controls, prefers-reduced-motion wrapper. Live preview. Free.
Generate @keyframes animations with 16 presets and full control over duration, timing function, delay, iterations, direction, and fill mode. Optional prefers-reduced-motion wrapper for accessibility.
CSS
HTML snippet
How to Use CSS Animation Generator
- Pick a preset (16 options) and a class name (default
animated). - Set duration, timing function (or custom
cubic-bezier), delay, iterations (number orinfinite), direction, fill mode. - Toggle prefers-reduced-motion wrapper to wrap the rule in
@media (prefers-reduced-motion: no-preference)- recommended for accessibility; users with reduced-motion preference enabled (Settings → Accessibility → Motion) won't see the animation. - Live preview reflects your settings. Copy CSS, copy HTML snippet, or download as
{classname}.css.
Frequently Asked Questions
How do keyframe percentages actually work?
Each percentage marks a point on the animation timeline, not a pixel position. 0% is the start state, 100% the end, and anything between is an intermediate pose the browser interpolates toward. A 2 second animation with a 50% keyframe reaches that pose at the 1 second mark. You can list several states on one line, like 0%, 100% { opacity: 1; }, which is how loops return to their starting look.
How does the prefers-reduced-motion wrapper work?
Users who have “Reduce motion” enabled in OS accessibility settings get prefers-reduced-motion: reduce from CSS media queries. Wrapping animation in @media (prefers-reduced-motion: no-preference) means the animation only applies when the user has NOT requested reduced motion. This is the modern best practice for accessibility – users sensitive to motion (vestibular disorders, certain types of vertigo) can disable animations system-wide.
What’s the difference between timing functions?
linear: constant speed throughout. ease: slow start, fast middle, slow end (the default). ease-in: slow start, fast end. ease-out: fast start, slow end. ease-in-out: slow on both ends, fast in the middle. step-start / step-end: jumps to end value at start / end of duration (no smooth interpolation). Custom cubic-bezier(x1, y1, x2, y2): bezier curve with two control points.
What does fill-mode do?
Controls what styles apply before and after the animation runs. none: revert to original styles. forwards: keep the last frame’s styles (animation “sticks” to end state). backwards: apply the first frame’s styles during the delay (visible during delay, not after). both: combines forwards and backwards. For “slide in and stay”, use forwards.
What does direction do?
normal: from 0% to 100% each iteration. reverse: from 100% to 0% (plays backwards). alternate: 0% → 100% → 0% → 100%… (mirror on every other iteration). alternate-reverse: starts reversed then alternates.
How do I apply the CSS to my HTML?
Add the generated CSS to your stylesheet (or in a <style> tag). Apply the class name to any HTML element: <div class="animated">…</div>. The animation starts when the element renders. The HTML snippet output shows the exact pattern.
Can I combine multiple animations?
Yes – CSS supports comma-separated values in the animation property. Generate two animations separately, then merge: animation: bounce 1s ease infinite, fadeIn 0.5s ease-out;. The keyframes for both must be defined; class names can share.
Why does the animation flicker when I change settings?
Each setting change triggers a reflow + restart so you can see the new behavior. For a non-flickering experience in production, set the animation once and don’t modify it. For interactive animations (start on click), use JavaScript class toggling.
Are CSS animations performant?
Animating transform and opacity is GPU-accelerated and cheap (most presets here do this). Animating width, height, top, left, or anything that triggers layout is expensive – avoid in animations. color, background-color, box-shadow: medium cost.
Is anything uploaded?
No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.