What are easing functions and how do they work?

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.

How do I make an animation loop forever?

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.

What's the difference between duration and delay?

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.

Can I animate multiple properties at once?

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.

How do I optimize animation performance?

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.

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

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.

Related Tools

Enhance your workflow with these complementary design tools

CSS Gradient Generator

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

CSS Shadow Generator

Generate box shadows and text shadows with multiple layers.

Image Converter

Convert and optimize images for web with quality controls.