CSS Animation Keyframes Generator

This tool generates ready-to-paste CSS @keyframes animations with a live preview. Pick an effect — fade in, slide up, scale in, bounce, pulse, spin or shake — then tune the timing and behaviour, and copy a complete @keyframes rule plus the animation shorthand. It saves you hand-writing keyframe percentages and remembering the shorthand order.

How it works

Each preset defines its keyframes as percentage steps (for example fade-in is 0% { opacity: 0 } to 100% { opacity: 1 }). The tool emits that named @keyframes block, then builds the animation shorthand from your controls in the correct order:

animation: name duration timing-function delay iteration-count direction fill-mode;

You adjust duration, timing function (ease, linear, etc.), delay, iteration count (a number or infinite), direction (normal, alternate, reverse) and fill mode (forwards keeps the final state). The preview replays on demand so you can see the exact result.

Worked examples

Fade-in, once: A fade-in over 0.6 s with ease-out, running once and holding its final state:

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.element { animation: fade-in 0.6s ease-out 0s 1 normal forwards; }

Paste both into your stylesheet and the element fades in once and stays visible.

Looping pulse for a loading indicator:

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.loader { animation: pulse 1.2s ease-in-out 0s infinite normal none; }

Setting iterations to infinite and fill-mode to none keeps the cycle clean — forwards is only needed when the animation stops and you want to freeze the final frame.

Attention shake (alternate direction):

@keyframes shake { 0% { transform: translateX(0); } 100% { transform: translateX(6px); } }
.field-error { animation: shake 0.12s ease-in-out 0s 6 alternate forwards; }

Using direction: alternate bounces the element left-right without writing both directions into the keyframes, and six iterations at 0.12 s each totals a natural 0.72 s shake.

Common mistakes and tips

• Forgetting fill-mode: forwards on one-shot entry animations causes elements to snap back to their original state — often the most jarring possible end result.
• Using infinite with forwards has no effect: forwards only applies after the last iteration, which never comes with an infinite loop.
• Long delays on hover animations feel laggy. Keep hover animation delays under 100 ms so the UI feels responsive.
• Prefer transform and opacity over top/left or width/height in your keyframes. The browser can animate transforms and opacity on the GPU without triggering layout reflow, keeping performance smooth even on mobile.
• The animation shorthand omits values at their defaults, so you can always write the full seven-slot form the generator produces to make each value explicit and readable.

Everything runs locally in your browser — nothing is uploaded.