CSS Animation Generator

Design Tools

Ready CSS keyframes with live preview

FreePrivateInstant

Animation

Duration

Delay

Easing

Repeat

Direction

Box

CSS

.stage{display:flex;align-items:center;justify-content:center;min-height:150px;overflow:hidden}.animated{width:84px;height:84px;border-radius:18px;background:linear-gradient(135deg,#14b8a6,#6366f1);color:#fff;font:800 15px sans-serif;display:flex;align-items:center;justify-content:center}
@keyframes tc-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-32px); }
}

.animated {
  animation: tc-bounce 1s ease-in-out 0s infinite normal both;
}

HTML

<div class="stage"><div class="animated">Box</div></div>

The .stage and size/color styles in the preview are only for display — copy the @keyframes and .animated rules.

Similar tools you may like

CSS Grid GeneratorVisual CSS grid builder with code to copy

CSS Gradient GeneratorCreate linear & radial CSS gradients

CSS Text Shadow GeneratorCreate glow and drop shadows for text

Border Radius GeneratorMake rounded corners and blobs in CSS

CSS Box Shadow GeneratorVisual box-shadow builder with CSS output

CSS Button GeneratorDesign buttons and copy the CSS

History

All history →

CSS Animation Generator — at a glance

Ready CSS keyframes with live preview.

Your choices

bounce

infinite

Generate

Result

@keyframes … + .animated { … }

How to use it — step by step

Just your input — nothing to install or sign up for.

Pick an animation

Choose a preset, then set duration, delay, easing and repeat.

Replay it

Press Replay animation to watch it again.

Copy the code

Press Copy CSS (and Copy HTML) and paste into your project.

Pro tips

Small things that make the result better.

✦Keep UI animations between 150ms and 600ms.

✦Use animation-fill-mode: both so the element keeps its start and end styles.

Quick facts

Freeno signup, no limit

Instantresult in a moment

Privatenothing is uploaded

Any devicephone, tablet or PC

Frequently Asked Questions

Is my data safe?+

Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.

Is this tool really free?+

Yes — completely free, no signup, no watermark and no usage limit.

More Free Tools

Guides you might like

All guides →

Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to use

PX to REM Converterpx vs rem: why your font sizes should be allowed to scale

Aspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises

Color Contrast CheckerIs your text readable? The contrast ratio, explained