CSS Animation Generator

Build CSS keyframe animations with presets — customize and copy the code.

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.element {
  animation: bounce 0.6s ease infinite normal none;
}

What It Does

This visual tool generates CSS @keyframes animations without writing any code. Choose from presets like fade, slide, bounce, spin, and pulse, then customize the duration, easing function, iteration count, and direction. A live preview shows the animation in real time, and the generated CSS is ready to copy into your project.

CSS Animation Syntax

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.element {
  animation: slideIn 0.4s ease-out both;
  /* shorthand: name duration timing-function fill-mode */
}

The full animation shorthand order: name duration timing-function delay iteration-count direction fill-mode play-state

Available Presets

  • Fade In / Fade Out — opacity transition for showing/hiding elements
  • Slide In — translate from off-screen, useful for drawers and modals
  • Bounce — elastic scale effect for attention-drawing UI
  • Spin — continuous rotation for loading indicators
  • Pulse — subtle scale oscillation for live status indicators
  • Shake — horizontal jitter for error states and form validation

Performance Tips

  • Animate only opacity and transform for GPU-composited, jank-free animations
  • Avoid animating width, height, top, or left — they trigger layout reflows
  • Add will-change: transform on elements with heavy animations to hint the browser to promote them to their own layer
  • Respect prefers-reduced-motion for accessibility — disable or reduce animations for users who opt out

Frequently Asked Questions

What CSS properties can I animate with keyframes?
Most visual properties can be animated: opacity, transform (translate, scale, rotate, skew), color, background-color, width, height, margin, padding, border-radius, and box-shadow. For best performance, stick to opacity and transform — these are composited by the GPU and do not trigger layout recalculation.
What is the difference between animation-timing-function values like ease, linear, and ease-in-out?
linear plays the animation at a constant speed. ease starts fast and slows down. ease-in starts slow and speeds up. ease-out starts fast and slows at the end. ease-in-out is slow at both ends. cubic-bezier() lets you define a fully custom curve.
How do I make an animation loop infinitely?
Set animation-iteration-count to infinite. In the generator, select "Infinite" for the iterations option. Example: animation: spin 1s linear infinite;
What is animation-fill-mode and when do I need it?
animation-fill-mode controls the element's style before the animation starts (forwards) or after it ends (backwards), or both. Use forwards to keep the final keyframe state after the animation completes. Without it, the element snaps back to its original style.
Can I use CSS animations without JavaScript?
Yes. CSS animations are entirely declarative — they run using only @keyframes and the animation property on a CSS selector. JavaScript is only needed if you want to trigger animations dynamically, respond to animation events, or control playback programmatically.