win-j logo
Personal Tech Blog

Developer Design Utility

CSS Animation Generator

Adjust CSS animations such as Fade, Slide, Scale, Bounce, Pulse, and more with a live preview, then generate @keyframes and animation code instantly.

Animation Code Generator Create CSS animation code by combining duration, delay, easing, iteration count, and direction.
Live Preview Check the selected animation effect instantly in the preview card.
@keyframes Output Generate class code, keyframes, and prefers-reduced-motion accessibility code together.
Animation Type Fade In
Duration 1s
Easing ease
Iteration 1

Animation Settings

Adjust animation type, speed, repeat behavior, and motion strength to create the UI motion you want.

Select the default @keyframes type to generate.

Used as the CSS @keyframes name and class animation value.

0.2s 1s 5s
0s 0s 3s

Choose the acceleration and deceleration curve of the motion.

Infinite loops are recommended only for loading, highlight badges, or decorative elements.

Choose normal, reverse, alternate, or alternate-reverse playback.

10 40 120
Live Preview
CSS Animation Preview Card

The selected animation is applied here in real time.

Type Fade In
Duration 1s
Iteration 1

Recommended Presets

Common animation combinations for card entrances, button highlights, loading decoration, and notification effects.

Basic Entrance Effects

Highlight / Interaction

Decoration / Loop Animation

Generated Result

Paste the code below into your CSS file and apply the class to the element you want.

Ready 
Select settings and click Generate CSS Code.
Practical guide

Generate CSS animation with a reduced-motion fallback

Preview eight motion presets and generate keyframes plus an animation rule. Adjust timing, repetition, direction and distance, then keep the reduced-motion rule in the exported CSS.

Prepared & reviewed by
win-j
Last reviewed
2026-10-01

Who this helps

  • Frontend developers adding short transitions
  • Designers comparing motion timing

When to use this tool

  • Fade an element into view once.
  • Create a subtle floating indicator.

From input to a checked result

  1. 1

    Choose fade, slide, scale, rotate, bounce, shake, float or pulse.

  2. 2

    Enter a descriptive animation name.

  3. 3

    Set duration, delay, easing, repetition and direction.

  4. 4

    Replay and inspect the initial and final states.

  5. 5

    Generate CSS and test it in the real layout, including reduced motion.

Example 1

A short entrance

Input
fade; 0.4s; ease-out; one iteration
Result
Opacity changes from 0 to 1.

The generator uses fill-mode both; there is no separate fill-mode selector.

Example 2

A gentle float

Input
float; distance 20px; alternate; infinite
Result
Movement between translateY(0) and translateY(-20px).

This is a floating preset, not a continuous spinner.

How it works

The selected preset supplies transform/opacity keyframes. A shorthand combines name, duration, easing, delay, iteration, direction and fixed fill-mode both. Ambiguous shorthand keywords in names receive a prefix. Reduced-motion output disables animation and restores visibility.

Limitations

  • Arbitrary keyframe editing is not available.
  • The rotate preset is an entrance rotation, not a 360-degree spinner.
  • Transforms can conflict with existing transforms in your component.
  • Reduced motion does not by itself ensure all state changes remain understandable.
Your data

Names, settings and previews are processed in the browser without uploading them.

Frequently asked questions

Can I use linear as the animation name?

It is normalized to animation-linear to avoid ambiguity with shorthand easing.

Can I change fill-mode?

The current generator exports both. Edit the result if your component needs another value.

Why keep the reduced-motion block?

It supplies an alternative for users requesting less motion. Check the final component in that mode too.