What are CSS keyframe animations and how do they work?

@keyframes define animation sequences by specifying styles at various points (0% to 100%) during the animation cycle. Unlike transitions (two states), keyframes allow complex multi-step animations with full control over timing and properties.

How do I create a CSS keyframe animation online?

Add keyframes at different percentages (0%, 50%, 100%), set CSS properties at each keyframe, configure animation settings (duration, timing, iterations), preview the animation in real-time, and copy the generated CSS code.

What is animation-duration in CSS?

animation-duration specifies how long one cycle of the animation takes. Use seconds (1s, 2.5s) or milliseconds (500ms, 1000ms). Shorter durations feel snappy, longer durations feel smooth. Typical UI animations: 200ms-500ms.

What is animation-timing-function in CSS?

Timing function controls the speed curve: ease (default, slow-fast-slow), linear (constant speed), ease-in (slow start), ease-out (slow end), ease-in-out (slow both ends), or cubic-bezier(x1,y1,x2,y2) for custom curves.

What is animation-iteration-count?

Iteration count sets how many times the animation plays. Use a number (1, 3, 10) or "infinite" for continuous looping. Decimal values play partial cycles. Example: animation-iteration-count: 2.5 plays 2.5 cycles.

What is animation-direction in CSS?

Direction controls playback: normal (0%→100%), reverse (100%→0%), alternate (forward then backward), alternate-reverse (backward then forward). Alternate is great for smooth looping animations like pulsing or bouncing.

What is animation-fill-mode?

Fill mode determines styles before/after animation: none (default, no styles applied), forwards (keeps end state), backwards (applies start state during delay), both (applies both). Use forwards to keep final animation state.

What is animation-delay in CSS?

Delay specifies how long to wait before starting the animation. Useful for sequencing multiple animations, creating staggered effects, or waiting for user interaction. Negative values start animation mid-cycle.

What is cubic-bezier for custom easing?

cubic-bezier(x1, y1, x2, y2) creates custom easing curves. Values define control points (0-1 range, can exceed for bounce effects). Tools like cubic-bezier.com help visualize curves. Common: cubic-bezier(0.68, -0.55, 0.265, 1.55) for bounce.

Can I animate any CSS property?

Most properties can be animated, but transform and opacity are most performant as they're GPU-accelerated and don't trigger layout recalculation. Avoid animating width, height, top, left, margin, padding (cause layout thrashing).

How do I pause a CSS animation?

Use animation-play-state: paused to pause and running to resume. This preserves the current animation state. Great for hover effects: .element:hover { animation-play-state: paused; }

What is the animation shorthand syntax?

animation: name duration timing-function delay iteration-count direction fill-mode play-state; Example: animation: bounce 1s ease-in-out 0s infinite alternate forwards running; Order matters for some values.

How do I chain multiple animations?

Use comma-separated values: animation: fadeIn 1s, slideUp 0.5s 1s; The second animation starts after 1s delay. Each animation can have different durations, timings, and iterations.

How do I make animations accessible?

Respect prefers-reduced-motion media query: @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }. Provide pause controls for continuous animations. Avoid flashing content that could trigger seizures.

Is my animation configuration secure when using this tool?

Yes! All CSS animation generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

What are CSS keyframe animations and how do they work?

@keyframes define animation sequences by specifying styles at various points (0% to 100%) during the animation cycle. Unlike transitions (two states), keyframes allow complex multi-step animations with full control over timing and properties.

How do I create a CSS keyframe animation online?

Add keyframes at different percentages (0%, 50%, 100%), set CSS properties at each keyframe, configure animation settings (duration, timing, iterations), preview the animation in real-time, and copy the generated CSS code.

What is animation-duration in CSS?

animation-duration specifies how long one cycle of the animation takes. Use seconds (1s, 2.5s) or milliseconds (500ms, 1000ms). Shorter durations feel snappy, longer durations feel smooth. Typical UI animations: 200ms-500ms.

What is animation-timing-function in CSS?

Timing function controls the speed curve: ease (default, slow-fast-slow), linear (constant speed), ease-in (slow start), ease-out (slow end), ease-in-out (slow both ends), or cubic-bezier(x1,y1,x2,y2) for custom curves.

What is animation-iteration-count?

Iteration count sets how many times the animation plays. Use a number (1, 3, 10) or "infinite" for continuous looping. Decimal values play partial cycles. Example: animation-iteration-count: 2.5 plays 2.5 cycles.

What is animation-direction in CSS?

Direction controls playback: normal (0%→100%), reverse (100%→0%), alternate (forward then backward), alternate-reverse (backward then forward). Alternate is great for smooth looping animations like pulsing or bouncing.

What is animation-fill-mode?

Fill mode determines styles before/after animation: none (default, no styles applied), forwards (keeps end state), backwards (applies start state during delay), both (applies both). Use forwards to keep final animation state.

What is animation-delay in CSS?

Delay specifies how long to wait before starting the animation. Useful for sequencing multiple animations, creating staggered effects, or waiting for user interaction. Negative values start animation mid-cycle.

What is cubic-bezier for custom easing?

cubic-bezier(x1, y1, x2, y2) creates custom easing curves. Values define control points (0-1 range, can exceed for bounce effects). Tools like cubic-bezier.com help visualize curves. Common: cubic-bezier(0.68, -0.55, 0.265, 1.55) for bounce.

Can I animate any CSS property?

Most properties can be animated, but transform and opacity are most performant as they're GPU-accelerated and don't trigger layout recalculation. Avoid animating width, height, top, left, margin, padding (cause layout thrashing).

How do I pause a CSS animation?

Use animation-play-state: paused to pause and running to resume. This preserves the current animation state. Great for hover effects: .element:hover { animation-play-state: paused; }

What is the animation shorthand syntax?

animation: name duration timing-function delay iteration-count direction fill-mode play-state; Example: animation: bounce 1s ease-in-out 0s infinite alternate forwards running; Order matters for some values.

How do I chain multiple animations?

Use comma-separated values: animation: fadeIn 1s, slideUp 0.5s 1s; The second animation starts after 1s delay. Each animation can have different durations, timings, and iterations.

How do I make animations accessible?

Respect prefers-reduced-motion media query: @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }. Provide pause controls for continuous animations. Avoid flashing content that could trigger seizures.

Is my animation configuration secure when using this tool?

Yes! All CSS animation generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

Keyframe Animation Generator

medium

Create CSS keyframe animations with visual timeline editor. Configure duration, timing, iterations, and export animation code.

Web Developmentcssanimationkeyframemotion

100% Private - Runs Locally

How to Use

1Add keyframes
2Set properties at each frame
3Preview animation
4Copy CSS code

Examples

Fade In

Input

Opacity animation

Output

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

.animated-element {
  animation: fadeIn 0.5s ease forwards;
}

Slide In Up

Input

Entrance from below

Output

@keyframes slideInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animated-element {
  animation: slideInUp 0.6s ease-out forwards;
}

Bounce

Input

Attention-seeking bounce

Output

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

.animated-element {
  animation: bounce 1s ease infinite;
}

Pulse

Input

Scale pulsing effect

Output

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.animated-element {
  animation: pulse 1s ease-in-out infinite;
}

Spin

Input

Loading spinner

Output

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animated-element {
  animation: spin 1s linear infinite;
}

Shake

Input

Error shake effect

Output

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.animated-element {
  animation: shake 0.5s ease-in-out;
}

Frequently Asked Questions

Related Tools

View all

Box Shadow Generator

Advanced CSS box-shadow generator with 25+ presets (Material Design, Tailwind, Neumorphism, Glow effects), multiple layers, color picker with opacity, customizable preview, and 4 output formats (CSS, Tailwind, SCSS, React).

CSS Gradient Generator

Create CSS gradients with multiple color stops. Support for linear, radial, and conic gradients with live preview and code export.

@keyframes slideInUp { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .animated-element { animation: slideInUp 0.6s ease-out forwards; }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .animated-element { animation: bounce 1s ease infinite; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .animated-element { animation: shake 0.5s ease-in-out; }