CSSAWWWARDS
+ Submit tool
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:
Share on XLinkedIn

Presets

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;}

How to use

01

Start from a preset

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

02

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.

03

Tune timing options

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

04

Preview and copy

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

More animation tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →