CSS Animation Generator

Create CSS Animations with a Visual Keyframe Timeline and Live Preview

Animation Settings

Animation Type

Animation Name

Duration (seconds)

Timing Function

Delay (seconds)

Iteration Count

Direction

Fill Mode

Live Preview

BOX

CSS Output

CSS Animation Timeline Builder

Keyframe: 0%

Position0%Transform

translateXpx

rotatedeg

scale

translateX(0px) rotate(0deg) scale(1)Opacity1Background#613583Width80pxHeight80pxBorder Radius12px

How it works:Click a timeline dot, change its properties, and the preview updates immediately. Add more keyframes to create custom animation stages. The generated@keyframesCSS is updated automatically.