)

CSS Animation Generator

Create custom CSS animations with a visual keyframe editor. Generate fade, slide, bounce, rotate, and custom animations with live preview and export.

CSS Animation Generator

Create custom CSS animations with keyframe editor and animation properties

Presets

Keyframes

Keyframe 1

Percentage

Opacity

Transform

Keyframe 2

Percentage

Opacity

Transform

Duration: 1000ms

Delay: 0ms

Timing Function

Iteration Count

Direction

Fill Mode

@keyframes customAnimation {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animated-element {
  animation: customAnimation 1000ms ease 0ms 1 normal forwards;
}

Understanding CSS Animations

CSS animations allow you to create smooth, performant animations using keyframes. Unlike transitions, animations can have multiple keyframes and can run automatically without user interaction.

Keyframes

Keyframes define the animation sequence. Each keyframe specifies the style at a particular point in the animation timeline, defined as a percentage (0% to 100%).

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Animation Properties

duration: How long the animation takes
timing-function: How the animation progresses (ease, linear, etc.)
delay: Delay before animation starts
iteration-count: How many times to repeat
direction: normal, reverse, alternate
fill-mode: Styles before/after animation

Animation Presets

Fade In

Smooth opacity transition from transparent to visible. Perfect for content reveals.

Slide In

Element slides in from the side. Great for menus, modals, and content panels.

Bounce

Playful bounce effect. Ideal for attention-grabbing elements and notifications.

Rotate

Continuous rotation. Useful for loading spinners and decorative elements.

Scale

Scale from zero to full size. Effective for modal appearances and pop-ups.

Shake

Shake animation for error states and attention-grabbing feedback.

Frequently Asked Questions

What's the difference between animations and transitions?

Transitions animate changes between two states (like hover), while animations can have multiple keyframes and run automatically. Animations are more flexible but transitions are simpler for basic state changes.

How do I optimize animation performance?

Use transform and opacity properties for animations as they can be hardware-accelerated. Avoid animating properties like width, height, or top/left which cause layout reflows. Keep animations under 60fps for smooth performance.

Can I combine multiple animations?

Yes! You can apply multiple animations to the same element by separating them with commas in the animation property. Each animation can have its own duration, timing, and keyframes.

What are the best timing functions?

ease: Default, starts slow, speeds up, then slows down
ease-in-out: Smooth start and end, good for most animations
ease-out: Fast start, slow end, great for entrances
linear: Constant speed, perfect for continuous animations
cubic-bezier: Custom curves for unique effects