jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free CSS Animation Keyframes Generator

Generate ready-to-use CSS @keyframes animations with nine preset motion patterns. Choose from fade, slide, scale, spin, pulse, bounce, and shake presets, then customize duration, easing, delay, iteration count, direction, and fill mode. The tool outputs a complete @keyframes rule with the animation shorthand property. A live preview shows the animation in real time with a replay button so you can review timing before copying the code. The animation name is editable, letting you match your project's naming conventions.

Loading tool...

What is CSS Animation Keyframes Generator?

CSS Animation Keyframes Generator creates complete CSS @keyframes rules and animation shorthand properties from preset motion patterns. CSS animations let you animate element properties (opacity, transform, etc.) over time without JavaScript. Each animation requires a @keyframes rule that defines the start and end states, plus an animation property on the target element that specifies duration, easing, and other timing parameters. This tool generates both parts simultaneously and shows a live preview so you can see the animation before using it in your project.

quickAnswer

Choose from nine animation presets — fade, slide, scale, spin, pulse, bounce, and shake — and customize duration, easing, delay, iteration count, direction, and fill mode. Get a complete @keyframes rule plus the animation shorthand CSS. A live preview shows the animation in action with a replay button.

Last updated: 2026-06-11

limitations

  • The @keyframes rule uses from/to syntax for simple two-state animations and percentage stops for multi-state presets. Custom keyframe percentages (e.g., 25%, 75%) must be added manually after copying the base output.
  • The tool generates a single animation at a time. For elements with multiple simultaneous animations (e.g., fade in while sliding up), generate each animation separately and combine them in your CSS with comma-separated animation values.
  • The live preview uses a static preview element. Animation behavior differs across browsers for certain properties like filter and box-shadow — test across Chrome, Firefox, and Safari before deploying.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Select an animation preset from the dropdown: Fade In/Out, Slide Down/Up, Scale In, Spin, Pulse, Bounce, or Shake.
  2. Customize the animation parameters: duration in seconds, easing function, delay before starting, iteration count (1, 2, 3, or infinite), direction, and fill mode.
  3. Edit the animation name to match your CSS naming conventions if needed.
  4. Watch the live preview animate. Click the Replay button to restart the animation and verify timing.
  5. Copy the complete output — @keyframes rule plus .element selector with the animation shorthand — into your stylesheet.

What you can use it for

  • Generate a fade-in animation for a modal or dialog that appears on click, using fadeIn with ease-out and fill-mode forwards.
  • Create a continuous spin animation for a loading spinner icon using the Spin preset with linear easing and infinite iteration.
  • Build an attention-grabbing pulse animation for a call-to-action button using the Pulse preset and infinite iteration.

Use cases

Practical examples

example

Toast notification enter animation

A developer is building a toast notification system. They select the Slide Down preset, set duration to 0.4s with ease-out easing and fill-mode to forwards. The generated @keyframes slides the toast from translateY(-20px) to its natural position. They copy the CSS into their .toast-enter class.

example

Dashboard loading spinner

A UI designer needs a loading spinner for a dashboard widget. They select the Spin preset, set duration to 1.2s with linear easing and infinite iteration. The output produces a continuous rotation. They apply it to an SVG icon inside the dashboard's loading state container.

Common mistakes

  • Using animation instead of transition for simple hover effects — animations are for autonomous or repeated motion. For hover-triggered property changes, use transition instead, which is simpler and more performant.
  • Setting a long delay without fill-mode: backwards — during the delay period, the element shows its default style. Use backwards fill mode to show the first keyframe style during the delay.
  • Forgetting to test animation performance on mobile — transform and opacity animations are GPU-accelerated and perform well. Animating width, height, or box-shadow triggers layout recalculations and can cause jank on mobile devices.

verification

  1. Select the Fade In preset. Verify the output includes a @keyframes fadeIn rule with from { opacity: 0 } to { opacity: 1 }, plus a .element selector with the animation shorthand.
  2. Select the Spin preset and set iteration count to infinite. Verify the output uses animation: spin 1.5s linear 0s infinite normal and the preview shows a rotating element with a Replay button.

FAQ

Questions about CSS Animation Keyframes Generator

What is the difference between ease, ease-in, ease-out, and linear?

ease (the default) starts slow, speeds up in the middle, and slows down at the end. ease-in starts slow and accelerates. ease-out starts fast and decelerates. linear maintains a constant speed throughout. For UI transitions, ease-out feels responsive. For looping animations like spin, linear prevents unnatural speed changes.

When should I use animation-fill-mode: forwards?

Use forwards when you want the animated element to keep its final keyframe state after the animation ends. For example, a fade-in animation should leave the element at opacity: 1. Without forwards, the element would snap back to opacity: 0. For looping animations (infinite), fill mode is usually unnecessary.

Can I combine multiple animations on the same element?

Yes, CSS supports multiple comma-separated animations on one element. For example, animation: fadeIn 0.6s ease, pulse 1.2s ease-in-out 0.6s infinite. After generating individual animations here, combine them manually in your CSS by separating each animation shorthand with a comma.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool