New toolFree · No signup

CSS @keyframes Builder

Build complete CSS @keyframes animations from scratch or start from 8 presets — fade, slide, scale, bounce, shake, pulse, and more. Add stops at any percentage, assign any CSS properties per stop, tune duration and easing, then replay the live preview before copying the complete output.

Share on X LinkedIn

Presets

Animation name

Duration

Iterations

Easing

Direction

Fill mode

Keyframe stops

Live preview

.element

@keyframes Output

@keyframes slide-in {  0% {    opacity: 0;    transform: translateY(16px);  }  100% {    opacity: 1;    transform: translateY(0);  }} .animated-element {  animation: slide-in 0.5s ease-out 1 normal forwards;}

Was this tool helpful?

How to use

Start from a preset

Load one of 8 presets (slide-in, bounce, shake, pulse…) to see a working animation immediately — then customise from there.

Edit keyframe stops

Each stop has a percentage and a list of CSS property:value pairs. Drag the slider or type a number to set the percentage.

Tune timing options

Set duration, easing, iteration count, direction, and fill-mode. Changes reflect in the preview instantly.

Preview and copy

Click Replay to restart the animation. Copy the @keyframes block and .animated-element declaration together.