✨

CSS Animation Builder (Visual)

Visual builder for CSS animations with 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration. Copy ready-to-use CSS.

Presets

Duration (s): 1 Delay (s): 0 Easing Iterations Direction Fill mode Animation name

Preview

CSS

Visual builder for CSS animations. 10 beautiful presets + custom keyframes. Standard @keyframes + animation shorthand.

CSS Animation 101

A CSS animation has two parts: @keyframes defines the steps, and the animation property applies them to an element.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 0.5s ease-out forwards;
}

duration: time (s/ms). 0.3-0.6s for UI transitions; 1-2s for hero animations.
timing-function (easing): speed curve.
- ease: slow-fast-slow (default).
- ease-out: fast at the start, slow at the end — natural for enter animations.
- ease-in: slow start, fast end — exit animations.
- linear: constant — rotate, progress bar.
- cubic-bezier(0.68, -0.55, 0.265, 1.55): bouncy overshoot.
delay: wait before running.
iteration-count: number of loops. infinite = forever.
direction: normal / reverse / alternate / alternate-reverse.
fill-mode: forwards keeps the final frame, backwards applies the first frame before running.

Page enter: fadeIn 0.4s + slideUp 0.5s ease-out forwards.
Toast notification: slideDown 0.3s ease-out + fadeOut after 3s.
Loading spinner: spin 1s linear infinite.
Heartbeat / pulse: pulse 1.5s ease-in-out infinite — important alerts.
Shake on error: shake 0.4s — for form validation failures.
Performance: animate only transform + opacity for GPU acceleration. Avoid animating width, top, margin (CPU expensive).