CSS Animation Builder

Create beautiful CSS animations with keyframes, easing functions, and timing controls. Build complex animations with live preview and export clean CSS code.

Animation Presets

Fade In

Element fades in from transparent

Slide In Left

Element slides in from the left

Bounce

Element bounces up and down

Pulse

Element scales up and down

Rotate

Element rotates 360 degrees

Color Change

Background color transitions

Preview

Background

Element

Size

Type

Element

Click play to see the animation in action

Generated CSS

@keyframes my-animation {
0% {
  transform: translateX(0);
  opacity: 1;
}

100% {
  transform: translateX(100px);
  opacity: 0.5;
}
}

.element {
  animation: my-animation 2s ease 0s 1 normal both;
}

Animation Settings

Animation Name

Duration

Delay

Iteration Count

Direction

Fill Mode

Timing Function

FAQ

Frequently Asked Questions

CSS keyframe animations allow you to define intermediate steps in an animation sequence. You specify styles at different percentages (0%, 50%, 100%) of the animation duration, and the browser smoothly transitions between them. This creates complex, multi-step animations without JavaScript.

Easing functions control the acceleration and deceleration of animations. 'Linear' moves at constant speed, 'ease-in' starts slow and speeds up, 'ease-out' starts fast and slows down, 'ease-in-out' does both. Cubic-bezier() allows custom curves for unique motion effects.

Set the iteration count to 'infinite'. The animation will repeat continuously until stopped. You can also specify a number for finite repetitions (e.g., 3 times) or use 'alternate' direction to make it play forward then backward.

Duration is how long the animation takes to complete one cycle (e.g., 2 seconds). Delay is how long to wait before starting the animation (e.g., wait 0.5 seconds then begin). Both use time units like 's' for seconds or 'ms' for milliseconds.

Yes! In each keyframe, you can animate multiple CSS properties simultaneously - transform, opacity, color, width, height, etc. The browser will smoothly transition all specified properties between keyframes.

Use transform and opacity properties when possible - they're GPU-accelerated and very performant. Avoid animating layout properties like width, height, or margin which can cause page reflows. Use 'will-change' CSS property to hint at upcoming animations.

Related Tools

Enhance your workflow with these complementary design tools.

CSS Gradient Generator

Create multi-layer CSS gradients with blend modes and color stops.

Try CSS Gradient Generator

CSS Shadow Generator

Generate box shadows and text shadows with multiple layers.

Try CSS Shadow Generator

Image Converter

Convert and optimize images for web with quality controls.

Try Image Converter