CSS Animation Generator

.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: none;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

What is CSS Animation Generator?

CSS Animation Generator is a free online tool that helps you create regular CSS Keyframe animations. Easily generate code for common animations like fade, slide, zoom, bounce, and rotate without writing complex keyframes manually.

With our animation generator, you can:

• Choose from 5 styles - Fade, Slide, Zoom, Bounce, Rotate
• Use Advanced Presets - Explore curated animation styles for common UI effects (Heartbeat, Pulse, etc.)
• Customize timing - Duration, Delay, Easing function
• Control playback - Iteration count, Direction, Fill mode
• Preview in real-time with play/pause/replay controls
• Copy instantly with complete keyframe and class code

Understanding CSS Animation

CSS Animations allow you to animate transitions from one CSS style configuration to another. They consist of two components: a style describing the CSS animation and a set of keyframes.

Animation Syntax

/* The animation code */
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

/* The element to apply the animation to */
div {
  animation-name: example;
  animation-duration: 4s;
}

5 Animation Types

• Fade: Opacity transition
• Slide: Transform translate transition
• Zoom: Transform scale transition
• Bounce: Complex translate keyframes
• Rotate: Transform rotate transition

Precise Control

• Duration: 0.1s to 10s
• Delay: 0s to 5s
• Iteration: Specific count or Infinite
• Easing: Linear, Ease, Ease-In, Ease-Out, Ease-In-Out

Dark Theme Support

Works seamlessly in both light and dark modes.

How to Use

1. Explore Presets (Optional): Switch to the Presets tab to find common animations like "Heartbeat", "Subtle Pulse", or "Fast Spin".
2. Select Type: Choose animation style (e.g., Bounce)
3. Adjust Timing: Set duration, delay, and easing
4. Configure Options: Set iteration count and direction
5. Preview: Watch the animation play
6. Copy: Click Copy to get the CSS code

Browser Compatibility

• Chrome: Version 43+ (Full support)
• Firefox: Version 16+ (Full support)
• Safari: Version 9+ (Full support)
• Edge: Version 12+ (Full support)
• Opera: Version 30+ (Full support)