CSS Animation Generator

Create custom CSS animations with keyframes, presets, and live preview

Animation Settings

Configure timing and behavior

Animation Name

Duration: 1000ms

Delay: 0ms

Timing Function

Iteration Count

Direction

Fill Mode

Keyframes

Define animation steps

Percentage:

Properties:

100%

Percentage:

Properties:

Generated CSS

Copy the generated CSS code

@keyframes my-animation {
  0% {
  opacity: 0;
  }

  100% {
  opacity: 1;
  }
}

.animated-element {
  animation: my-animation 1000ms ease 0ms 1 normal none;
}

Features

🎨

Custom Keyframes

Define precise keyframes for your animations

⚡

Animation Presets

Quickly apply common animation styles

👀

Live Preview

See your animations in action instantly

📋

Copy CSS

Easily copy generated CSS code to clipboard