CSS Animation Generator
Visually design CSS animations with a live preview, a built-in keyframe preset library (fade, slide, bounce, pulse, spin, shake, zoom, flip and more), full timing/easing/iteration control, a custom keyframe editor, and one-click clean CSS export.
Each stop controls the element state at that offset. Translate values are in px, rotate in degrees, scale 1 = original size, opacity 0–1.
About this tool
A CSS animation moves an element between property values over time using @keyframes. Unlike transitions, animations can loop, chain multiple steps, and run without a trigger event — they are the right tool for entrance effects, loaders, pulse indicators, and any motion that repeats or has more than two states.
Example: a 0.6s fade-in uses keyframes that go from opacity 0 to opacity 1, applied with animation: fadeIn 0.6s ease-out both. A continuous pulse uses animation: pulse 2s ease-in-out infinite with keyframes that scale between 1 and 1.05 at the midpoint.
This generator lets you tune duration, delay, iteration count, direction, fill mode, and timing function in a live preview, pick from a library of common presets, edit keyframes directly, and export the finished CSS ready to paste into a stylesheet. The output works without any JavaScript library.
FAQ
Animation or transition — which should I use? ›
Use a transition when an element moves between two states in response to an event like hover or click. Use an animation when you need more than two keyframe steps, looping behavior, or motion that starts automatically on page load.
What does the 'fill mode' do? ›
fill-mode controls which property values apply before the animation starts and after it ends. 'both' (the common choice) holds the first keyframe before start and the last keyframe after end, so an element stays invisible before a fade-in and stays visible after it finishes.
Is ease-out better than ease-in-out? ›
For entrance animations ease-out usually feels more natural because fast-start-then-slow mimics real-world motion. ease-in-out suits loops. Avoid linear for organic motion — it reads as mechanical. The generator's timing function picker lets you compare them on the live preview.
How do I make the animation respect prefers-reduced-motion? ›
Wrap the animation in a media query. Inside that query, apply the animation only when prefers-reduced-motion equals 'no-preference'. Users who set reduced motion in their OS will then see no movement, which is an accessibility best practice.
How is this different from the CSS Loader Generator? ›
This tool designs standalone keyframe animations (fade, slide, bounce, spin, etc.) for any element on a page. The <a href="/css-loader-generator">CSS Loader Generator</a> is purpose-built for loading spinners — pre-made spinner, dots, bars, ring and pulse styles with size, color, and speed controls. Use this when you need a custom animation for a hero, a button, or an entrance; use the Loader Generator when you just need a ready-made loading indicator.
How is this different from the Scroll-Driven Animations Generator? ›
This tool creates time-based CSS keyframe animations that play automatically or on a trigger with configurable duration, delay, and iteration count. The <a href="/scroll-driven-animations">Scroll-Driven Animations Generator</a> creates animations that are linked to scroll position using scroll() and view() timelines — they play as the user scrolls. Use this tool when you want an animation that runs on a clock; use Scroll-Driven Animations when you want motion tied to scroll progress.
Can I animate CSS transforms with this tool? ›
Yes. The custom keyframe editor accepts any CSS property including translate(), rotate(), scale(), and skew(). To visualise and tune the transform values before adding them to keyframes, use the <a href="/css-transform">CSS Transform Generator</a> which provides sliders and a 3D preview for the transform property specifically.