What animation presets are available?

17 presets: Bounce, Fade In/Out, Slide In (4 directions), Spin, Pulse, Shake, Flip, Swing, Rubber Band, Jello, Heart Beat, Zoom In/Out.

Can I create custom animations?

Yes! Add keyframes at any percentage, customize transform, opacity, background, border-radius, shadow, and filter properties for each keyframe.

Does the preview use real CSS?

Yes! The live preview uses actual CSS @keyframes injected via a style tag, not a JavaScript animation library. What you see is exactly what the CSS will produce.

What is the cubic-bezier editor?

A visual curve editor where you drag two control points to define a custom timing function. The curve updates in real-time.

CSS Animation Generator

Visual CSS animation builder with 17 presets, keyframe editor, cubic-bezier curve editor, and live preview.

CSS Animation Generator

Build keyframe animations visually, preview in real-time, and export production-ready CSS.

Animation Presets

Animation Name

Duration1s

Timing Function

Delay0s

Iteration CountInfinite

Direction

Fill Mode

Live Preview

Keyframe Timeline

0%25%50%75%100%

%tY:-30

%s:1,0.9

%tY:-15

%s:1,0.95

Generated CSS

@keyframes bounce {
  0% {

  }
  20% {
    transform: translateY(-30px);
  }
  40% {
    transform: scale(1, 0.9);
  }
  60% {
    transform: translateY(-15px);
  }
  80% {
    transform: scale(1, 0.95);
  }
  100% {

  }
}

.animated-element {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}

Shorthand

animation: bounce 1s ease 0s infinite normal both;

Everything runs locally in your browser. No data is sent to any server.

CSS Animation Generator कसरी प्रयोग गर्ने

1
Choose an animation preset or start custom.
2
Adjust duration, timing, delay, and other properties.
3
Edit keyframes on the visual timeline.
4
Preview the animation with play/pause/restart controls.
5
Copy the generated CSS code.

CSS Animation Generator बारेमा

Build CSS animations visually with our comprehensive CSS Animation Generator. Choose from 17 presets (Bounce, Fade, Slide, Spin, Pulse, Shake, Flip, and more) or build custom animations from scratch.

Features a visual keyframe editor with timeline, per-keyframe property controls (transform, opacity, filters), and a cubic-bezier curve editor with draggable control points. Live preview uses actual CSS animations — what you see is exactly what your CSS will produce.

Copy the generated CSS code with syntax highlighting. Adjust speed, play/pause/restart, and preview on different element shapes.

CSS Animation Generator बारेमा बारम्बार सोधिने प्रश्नहरू

सम्बन्धित उपकरणहरू

Tailwind CSS Playground CSS Gradient Text Generator Box Shadow Generator