← All toolsFree — no signup

Keyframes Generator

Configure a simple animation and generate @keyframes plus the animation shorthand, with a playing preview.

Keyframes Generator

Animation Name

Duration: 0.6s

From Opacity: 0

To Opacity: 1

From Y: 20px

To Y: 0px

Easing

Preview

CSS Output

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fadeUp {
  animation: fadeUp 0.6s ease-out both;
}

Loading tool…

How it works

Set name, duration, and from/to values

Watch the preview play the animation

Copy the @keyframes and animation CSS

Need a custom tool built into your product?

We build calculators, estimators, and AI-powered tools that convert visitors into leads.

Start a project