How do I create a custom CSS animation?

Select an animation preset as a starting point, then use the keyframe timeline to add or modify keyframes. Adjust properties like transform, opacity, and scale at each keyframe. The CSS code updates in real-time as you make changes.

What are easing functions?

Easing functions control the rate of change during an animation. They determine whether an animation starts slow and speeds up (ease-in), starts fast and slows down (ease-out), or follows custom curves for effects like bounce or spring.

Can I use these animations with Tailwind CSS?

Yes! Our generator provides both standard CSS keyframe code and Tailwind CSS configuration. You can copy the Tailwind config to extend your theme with custom animations.

How do I make an animation loop infinitely?

Set the 'Iteration Count' to 'infinite' in the animation settings panel. You can also combine this with 'alternate' direction to create smooth back-and-forth loops.

Are these animations free to use?

Yes, all animations you create with this tool are completely free to use in personal and commercial projects without attribution.

Keyframe Editor Added

CSS Animation Generator

Create stunning CSS animations with our intuitive keyframe editor.

Controls

Keyframe Timeline

2 keyframes

0%10%20%30%40%50%60%70%80%90%100%

100%

Animation Preset

Duration1s

Delay0s

Iterations1

Easing Function

Direction

Fill Mode

Play State

Infinite Loop

Preview

Animation

Keyframe 0%

custom-animation 1s ease 0s 1 normal forwards

Keyframe0%

Transform2 edited

Translate Xpx

Translate Ypx

Translate Zpx

Scale

Scale X

Scale Y

Rotatedeg

Rotate Xdeg

Rotate Ydeg

Rotate Zdeg

Skew Xdeg

Skew Ydeg

3D Axis X

3D Axis Y

3D Axis Z

3D Angledeg

Origin X%

Origin Y%

Visual Effects1 edited

Opacity

Blurpx

Brightness%

Contrast%

Saturate%

Hue Rotatedeg

Grayscale%

Sepia%

Invert%

Layout & Sizing

Widthpx

Heightpx

Toppx

Leftpx

Margin Toppx

Margin Leftpx

Padding Toppx

Padding Leftpx

Border & Background

Border Radiuspx

Border Widthpx

Shadow Xpx

Shadow Ypx

Shadow Blurpx

Shadow Spreadpx

Shadow Opacity

BG Size%

Typography

Font Sizepx

Font Weight

Letter Spacingpx

Line Height

Text Indentpx

SVG & Motion Path

Stroke Dash Offset

Stroke Widthpx

Offset Distance%

Offset Rotatedeg

Popular Animations

Click to select and customize.

Scale Up Center

Scale Up Top

Scale Up Tr

Scale Up Right

Scale Up Br

Scale Up Bottom

Scale Up Bl

Scale Up Left

Scale Up Tl

Scale Up Hor Center

Scale Up Hor Left

Scale Up Hor Right

Scale Up Ver Center

Scale Up Ver Top

Scale Up Ver Bottom

Scale Down Center

Scale Down Top

Scale Down Tr

Free CSS Animation Generator

Create stunning CSS animations without writing code from scratch. Our free CSS animation generator provides 100+ ready-to-use animation presets including fade effects, slide transitions, bounce animations, and attention-grabbing effects like shake and pulse. With our visual keyframe editor, you can customize every aspect of your animation – from timing and easing to complex multi-step sequences. The built-in cubic-bezier curve editor lets you design custom easing functions for that perfect spring or bounce effect. All animations are optimized for performance and work seamlessly with React, Vue, Next.js, and any CSS-based project.

Key Features

100+ Animation Presets

Choose from a vast library of ready-to-use animations including entrances, exits, attention seekers, and basic transforms.

Visual Keyframe Editor

Create custom keyframe animations with our intuitive timeline editor. Add, remove, and modify keyframes visually.

Custom Easing Curves

Design your own cubic-bezier curves with our interactive easing editor or choose from 30+ presets like Ease Out Back.

Real-Time Preview

See your animations play instantly on different shapes including boxes, circles, cards, text, and buttons.

One-Click Export

Copy optimized CSS keyframes or Tailwind CSS classes directly to your clipboard.

Animation Properties

Control duration, delay, iteration count, direction, and fill mode for complete animation customization.

How to Create CSS Animations

1
Browse the animation library and click on any preset to load it into the editor.
2
Use the shape selector to preview the animation on different elements (box, circle, card, text, button).
3
Adjust timing properties: duration controls speed, delay adds a pause before starting, and iteration count sets how many times it plays.
4
Click on the easing function to open the curve editor and customize the animation's acceleration.
5
For custom animations, use the keyframe timeline to add new keyframes and modify property values at each point.
6
Copy the generated CSS code or Tailwind config to use in your project.