CSS Animation & Keyframes Generator
Design keyframe animations visually and copy accessible CSS or a Tailwind theme snippet.
Preview
Presets
Keyframes
Select a keyframe to edit it. Drag it along the line, or use the arrow keys (Shift for 10%) to move it; Delete removes it.
Animation
Code
Paste @keyframes to edit them
About the CSS Animation & Keyframes Generator
Make CSS keyframe animations without guessing the syntax. Start from one of 22 presets — fades, slides, zooms, a bounce that slows at the top like a thrown ball, shake, pulse, heartbeat, spin, 3D flips, swing, wobble, float, blink, blur-in, a color cycle and a typewriter with a blinking caret — or build your own. Put keyframes anywhere on the timeline and give each one a transform (move, rotate, 3D rotate, scale, skew), opacity, text and background color, filters (blur, brightness, saturation, hue, grayscale) or a width for text reveals, plus the easing of the segment that follows it.
The preview plays the real CSS on a box, a line of text or a button; drag Time to inspect any moment, or select a keyframe to see exactly that frame. Duration, delay, repeats, direction, fill mode, easing, transform origin and 3D perspective are all settings. The code comes as plain CSS — wrapped so it only runs for visitors who have not asked their device for less motion — as a Tailwind CSS v4 @theme block, a Tailwind v3 config or HTML. You can also paste existing @keyframes to edit them.
How to use it
- Pick a preset, or keep the bounce and change it.
- Select a keyframe on the timeline (or add one) and set its properties: tick a group such as Transform or Opacity to set it at that keyframe, then move the sliders. The preview jumps to that keyframe.
- Drag keyframes along the timeline, or type a percentage, to change when they happen; choose the easing to the next keyframe if a segment needs its own.
- Under Animation, set the duration, delay, repeats, direction, fill mode, easing and transform origin, then select Play or Replay.
- Under Code, choose CSS, Tailwind v4, Tailwind v3 or HTML, set the class name and the reduced-motion behaviour, and copy or download the result.
Examples
Preset: Fade in · Reduced motion: animate only when motion is welcome
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (prefers-reduced-motion: no-preference) {
.animated {
animation: fade-in 500ms ease-out both;
}
}Preset: Spin · Reduced motion: switch it off when less motion is asked
@keyframes spin {
0% {
transform: none;
}
100% {
transform: rotate(360deg);
}
}
.animated {
animation: spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
}Every keyframe lists the same transform functions (or none), so browsers rotate the whole 360°. Mixing different function lists makes them interpolate matrices, which can turn a full spin into no movement at all.
Preset: Pulse · Code: Tailwind v4
/* Tailwind has its own animate-pulse: this replaces it. Rename the animation to keep both. */
@theme {
--animate-pulse: pulse 1.4s ease-in-out infinite;
@keyframes pulse {
0%, 100% {
transform: none;
}
50% {
transform: scale(1.08);
}
}
}
<div class="motion-safe:animate-pulse">…</div>The code warns when a name such as pulse, spin, ping or bounce would replace one of Tailwind’s own animations.
Common uses
- Entrance animations for cards, dialogs, toasts and hero sections that respect reduced-motion settings.
- Attention effects such as shake on a wrong password, pulse on a notification badge or a bouncing scroll hint.
- Loading spinners and looping decorations without JavaScript or an animation library.
- Learning how keyframes, per-keyframe easing, fill modes and alternate directions behave by changing them and watching.
How CSS animations work
A @keyframes rule lists what the element looks like at points in time (from 0% to 100% of one run), and the animation property plays it: animation: name duration easing delay count direction fill-mode (CSS Animations). The first time value is the duration and the second the delay; a negative delay starts part-way through. The easing applies to each segment between two keyframes, and a keyframe can set its own animation-timing-function for the segment that starts at it — the bounce preset slows down on the way up and speeds up on the way down that way. A property a keyframe does not set is interpolated across it. !important is not allowed inside keyframes, and keyframes with identical styles can share a line such as 0%, 100% { … }.
Fill mode and direction
Fill mode decides what shows outside the run: forwards keeps the last keyframe, backwards shows the first keyframe during the delay, both does both, and none shows the element’s normal style. Entrance animations usually need both, or the element flashes in its final position before the animation starts. Direction reverse plays the keyframes backwards, alternate goes forwards then backwards on every other run (useful with a repeat count above 1 or infinite), and alternate-reverse starts backwards.
Motion and accessibility
Large or repeating movement can make people with vestibular disorders dizzy or sick. WCAG 2.2 asks that motion started by an interaction can be switched off (SC 2.3.3, level AAA), and that anything that starts moving by itself, lasts more than five seconds and is shown alongside other content can be paused, stopped or hidden (SC 2.2.2, level A). The CSS media feature prefers-reduced-motion tells you when someone has asked their device for less motion. The code here either runs the animation only under @media (prefers-reduced-motion: no-preference) (the default), or turns it off under @media (prefers-reduced-motion: reduce); in Tailwind the same is motion-safe:. Changing color or opacity is a gentler alternative to movement.
Performance
Transforms and opacity can be animated by the browser’s compositor without recalculating the layout, so they stay smooth. Filters cost more to paint, especially large blurs, and animating width (as the typewriter does) recalculates the layout every frame — fine for one line of text, not for big parts of a page.
Limitations
- One animation is edited at a time (the typewriter preset also writes its caret animation). Combine several in your CSS by separating them with commas in
animation. - Box shadows, clip paths, sizes other than width, and motion paths are not animated here; the importer skips such properties and says so.
- Pasted keyframes must use one unit for translations (px or %); rem and em are converted at 16px.
- If your device asks for reduced motion, the preview stays still until you select Play — and the code you copy respects the same setting for your visitors.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I make an element fade in with CSS?
Choose the Fade in preset and copy the CSS: @keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } } and animation: fade-in 500ms ease-out both on your element. both keeps it invisible during any delay and visible afterwards.
Why does my rotate animation not spin?
Usually because the keyframes list different transform functions (for example translateX(0) in one and rotate(360deg) in another). Browsers then interpolate the combined matrices, and 0° and 360° look the same. This tool writes the same functions in every keyframe, so the full turn is kept.
What does prefers-reduced-motion do?
It is a media feature that is true when the visitor has turned on “reduce motion” (or similar) in their operating system. The default code only starts the animation when it is no-preference; the other option keeps the animation but switches it off under reduce.
How do I add a custom animation to Tailwind CSS?
In Tailwind v4, put --animate-name: … and the @keyframes inside @theme in your CSS and use the class animate-name (with motion-safe: for reduced motion). In Tailwind v3, add the keyframes and the animation to theme.extend in tailwind.config.js. Both tabs are written for you.
Can I edit an animation I already have?
Yes. Open Paste @keyframes to edit them, paste the @keyframes rule (and its animation declaration if you like) and select Import. Transforms, opacity, colors, filters, width in ch and per-keyframe easing are read; anything else is listed as skipped.
Is anything uploaded?
No. The animation is built and previewed in your browser, and the page works offline once loaded.