CSS Animation Generator

Animation result

Animate me

Timeline0 ms / 1000 ms

Animation settings

Animation name

Target selector

Duration

Delay

Iterations

Infinite animation

Repeat forever

Direction

Fill mode

Play state

Timing and easing

Timing function

Step count

Step position

Bezier X1

Bezier Y1

Bezier X2

Bezier Y2

Output options

Property format

Code output

Formatting

Vendor prefixes

Add legacy prefixes

CSS variables

Use custom properties

Reduced motion

Add accessibility rule

Animation presets

Search presets

Preset

Keyframe editor

Edit any keyframe. Transform and visual values combine automatically.

Preview element

Demo element

Text

Image URL

Width

Height

Border radius

Element background

Text color

Preview background

Background preset

Preview speed

Custom HTML

Scripts and inline event handlers are removed before previewing.

Multiple animations

Combine the primary animation with additional animation declarations.

Import existing CSS

Validation and exports

CSS looks valid

Formula used

The generator builds each animation from name duration easing delay iterations direction fill mode and play state.

Each keyframe combines transform visual position filter and custom declarations.

How to use this calculator

Choose a preset or configure the animation settings manually.

Edit keyframes and watch the preview update immediately.

Validate the result then copy or export the generated CSS.

Example settings

Effect	Duration	Easing	Key idea
Fade In	1 second	ease	Opacity moves from zero to one.
Bounce	1 second	ease-in-out	Vertical translation rises then returns.
Spin	2 seconds	linear	Rotation reaches one full turn.