Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

CSS Animation Generator

Build CSS animations with live preview. Choose from 16 presets, edit keyframes per-stop, generate hover transitions and loading spinners — copy CSS, Tailwind or @keyframes instantly.

16 PresetsKeyframe EditorHover GeneratorLoading AnimsTailwind Output

How to use

1

Pick a preset

Choose from 16 built-in animations — Fade, Slide, Zoom, Rotate, Bounce, Pulse, Shake, Flash, Spinner and Skeleton Loader. The preview plays instantly and all controls update to match the preset.

2

Tweak controls

Adjust duration, delay, timing function, iteration count, direction and fill-mode in the Controls tab. The shorthand preview at the bottom shows you the final animation property value in real time.

3

Fine-tune keyframes

Switch to Keyframe Editor to control opacity, translateX/Y, scale, rotate and skew at each stop (0%, 25%, 50%, 75%, 100%). Toggle which stops are included in the output. Hit Replay to preview the result.

4

Generate hover or loading code

Use the Hover tab to pick a hover transition effect (scale, lift, glow, etc.) and set the duration. Use the Loading tab for spinner, dots, pulse or bars animations — choose color and speed.

5

Copy the output you need

Switch between Full CSS, @keyframes only, animation shorthand, or Tailwind config output. Copy with one click and paste into your project.

What CSS animations are used for

Page entrance effects

Fade In, Slide Up and Zoom In give content a polished appearance as it enters the viewport. Triggered with Intersection Observer, they create a smooth, professional reveal effect.

Loading states

Spinner, dots, pulse and bar animations communicate that content is loading. CSS-only loaders are lightweight, accessible and work without JavaScript.

Interactive feedback

Hover transitions (scale, lift, glow) give users tactile feedback that an element is interactive. Subtle, short animations (0.15–0.25s) improve perceived responsiveness without being distracting.

Attention & emphasis

Pulse, bounce and shake animations draw attention to important elements — a call-to-action button, a notification badge, or a form validation error.

Skeleton loading UI

Skeleton screens use shimmer animations to show placeholder shapes while content loads — dramatically improving perceived performance compared to a blank screen or spinner.

Exit animations

Fade Out, Zoom Out and Rotate Out create graceful exit transitions before an element is removed. Use fill-mode: forwards so the element stays invisible after the animation ends.

How it works

Preset library

Each of the 16 presets stores a set of keyframe stops with pre-computed opacity, translate, scale, rotate and skew values. Selecting a preset populates all five stop editors so you can tweak from a working starting point.

Live CSS injection

The preview uses React's dangerouslySetInnerHTML to inject a <style> tag containing the live @keyframes and animation declaration. Changing any control updates the style tag in real time — no page reload, no render delay.

Replay via key prop

Clicking Replay increments a counter that is set as the key prop on the preview element. React unmounts and remounts the element, clearing the animation state and restarting it from 0% — the cleanest way to replay CSS animations in React.

Four output formats

The generator produces full CSS (property + keyframes), @keyframes only, animation shorthand, or a Tailwind config block with the complete keyframes and animation definitions ready to paste into tailwind.config.js.

Related tools

CSS Grid Generator

Build two-dimensional layouts visually with named areas, cell spans and 5 output formats.

CSS Clamp Generator

Generate fluid clamp() values for responsive typography and spacing.

Border Radius Generator

Design rounded corners, circles, pill buttons and organic blob shapes.

CSS Box Shadow Generator

Multi-layer shadows, neumorphism and glow effects with CSS and Tailwind output.

Frequently asked questions

Quick answers about this free online tool.

CSS animations let you animate HTML elements without JavaScript or Flash. You define a set of keyframes — snapshots of an element's style at specific points in time — and the browser smoothly interpolates between them. Two components work together: the @keyframes rule (which defines the animation's stages) and the animation property (which applies it to an element with controls for duration, timing, repeat, and more).

@keyframes is the CSS rule that defines what an animation looks like at each stage. You write percentage values (0%, 50%, 100%) or the keywords from and to, and specify the CSS properties at each stage. The browser smoothly transitions between them. You can define as many percentage stops as you need — adding 25% and 75% stops gives you fine-grained control over the animation's pace and feel.

The animation shorthand sets all animation sub-properties in one line: name | duration | timing-function | delay | iteration-count | direction | fill-mode. Example: animation: slideUp 0.5s ease-out 0s 1 normal both. You can omit trailing default values — animation: slideUp 0.5s ease-out is equally valid. When applying multiple animations, separate them with commas: animation: fadeIn 0.3s, slideUp 0.5s 0.1s.

The timing function controls the pacing of the animation — how fast it moves at each point. ease starts slow, accelerates, then decelerates (most natural). linear moves at constant speed. ease-in starts slow and accelerates. ease-out starts fast and decelerates (good for exit animations). ease-in-out does both. cubic-bezier() lets you define a custom curve. steps() creates a frame-by-frame effect (useful for sprite sheet animations).

fill-mode controls what styles the element retains before and after the animation runs. none (default): the element returns to its original styles. forwards: the element keeps the styles from the last keyframe after the animation ends — essential for exit animations so the element stays hidden. backwards: the element applies the first-keyframe styles during the delay period. both: applies both forwards and backwards behaviour — usually the most useful choice.

Transitions automatically animate between two states (normal → hover, for example) and require a trigger. Animations run automatically (or on a trigger), can loop, can have multiple keyframes, can play in reverse, and don't need a second state. Use transitions for hover effects and state changes. Use animations for looping effects, entrance/exit effects, progress indicators, and anything with more than two states.

The classic approach: create a circular element with a partial border, then rotate it infinitely. The CSS: width/height (40px), border: 4px solid rgba(color, 0.2), border-top-color: color, border-radius: 50%. Then apply animation: spin 0.8s linear infinite with @keyframes spin { to { transform: rotate(360deg); } }. The Loading tab in this tool generates this (and dots/pulse/bars variants) with one click.

Tailwind includes built-in animations: animate-spin, animate-ping, animate-pulse, animate-bounce. For custom animations, add them to tailwind.config.js under theme.extend.animation and theme.extend.keyframes. Then use the class name you defined (e.g. animate-fade-in). The Tailwind output format in this tool generates the complete config block you can paste directly into your Tailwind configuration.