CSS Animation Builder (Visual)

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

Animation properties

• 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.

Practical tips

• 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).