All Tools
Developer

CSS ANIMATION

Create, preview, and export CSS @keyframes animations with a visual timeline editor. Add keyframe stops, set transforms, opacity, colors, and easing curves. Copy ready-to-use CSS code.

Keyframes Timeline
Properties (0%)
Timing & Easing
Preview Content
Presets
Animation Library
Share & Export
Live Preview
0.0s / 1.5s 0%
Background
CSS Output
/* Adjust controls to generate CSS */

Frequently Asked Questions

How does the CSS Animation Generator work?
Use the visual timeline to add and arrange keyframe stops (0%, 50%, 100%). Select a stop and adjust its properties — opacity, transforms, background color, border radius, and CSS filter. Set the timing, delay, direction, and easing curve for the animation. The preview loops in real-time so you can see the effect immediately.
Is the CSS Animation Generator free to use?
Yes, it is completely free with no hidden fees, subscriptions, or usage limits. No sign-up or account required.
What properties can I animate?
You can animate: opacity (0-1), translateX and translateY (-200px to 200px), rotate (-360deg to 360deg), scaleX and scaleY (0-3), background-color (any hex color), border-radius (0-50px), and CSS filter values (grayscale, blur, sepia, etc.).
What easing options are available?
Choose from standard CSS easings: ease, linear, ease-in, ease-out, and ease-in-out. For advanced control, select cubic-bezier and enter your own control point values (x1, y1, x2, y2) for a fully custom easing curve.
Can I control how many times the animation repeats?
Yes, set a specific iteration count (1-99) in the Timing panel, or check the Infinite box to make the animation loop forever.
What is the difference between fill modes?
Fill modes control the element's state before and after the animation. None (default) — the element snaps back. Forwards — retains the last keyframe's styles. Backwards — applies the first keyframe's styles during the delay. Both — combines forwards and backwards behavior.
Can I copy the animation code?
Yes, the CSS Output panel shows the complete @keyframes rule and the animation property. Click Copy CSS to copy both to your clipboard, ready to paste into your project.

How to Use

01

Add Keyframe Stops

Click anywhere on the timeline track to add a keyframe stop, or start with the default 0% and 100% stops.

02

Adjust Properties

Select a keyframe stop and use the sliders to set opacity, translate, rotate, scale, background color, and border radius for that point in the animation.

03

Set Timing

Configure duration, delay, iteration count, direction, fill mode, and easing curve. Choose preset easings or enter a custom cubic-bezier.

04

Try Presets

Click any preset (Fade In, Slide Up, Bounce, Pulse, Shake, Spin, Wiggle, Flip) to instantly load a complete animation. Fine-tune from there.

05

Export CSS

Copy the generated @keyframes rule and animation property with one click. Paste directly into your stylesheet.

How to Calculate

The CSS Animation Generator creates standard CSS @keyframes rules by interpolating the user's per-stop property values. Each keyframe stop is formatted with its percentage, and the property values are serialized into proper CSS declarations (transform functions, color, border-radius, filter, opacity). The animation shorthand is assembled from the timing panel values (duration, easing, delay, iteration, direction, fill mode). The preview uses the browser's native CSS animation engine for pixel-perfect, real-time playback.

About the CSS Animation Generator

The CSS Animation Generator is a free online tool for creating, previewing, and exporting CSS @keyframes animations. Use the visual timeline to add and arrange keyframe stops, then set per-stop properties — opacity, translateX/Y, rotate, scaleX/Y, background-color, border-radius, and CSS filter effects. Configure timing, delay, iteration count, direction, fill mode, and easing (including custom cubic-bezier curves).

Choose from 8 curated presets (Fade In, Slide Up, Bounce, Pulse, Shake, Spin, Wiggle, Flip) to get started quickly, then fine-tune individual values. The live preview loops your animation in real-time on a configurable background (light, dark, gradient, or checkerboard).

Built with privacy in mind, all processing happens directly in your browser. No sign-up required, no data stored, no tracking. Simply open the tool, create your animation, and copy the ready-to-use CSS code.

Related Tools

CSS Box Shadow Generator
CSS Filter & Effect Generator
Color Palette Generator
JSON Formatter & Validator
Meta Tag Generator
Open Graph Generator