CSS Animation Generator

What is a CSS Animation?

CSS animations let you transition an element between styles over time without any JavaScript. They are defined using @keyframes, which specify what the element looks like at each step of the animation, and controlled using the animation property on the element itself.

Unlike CSS transitions (which only animate between two states triggered by an event), animations run automatically, can loop, can have multiple steps, and can start with a delay. They are used for entrance effects, loaders, hover states, attention-grabbing UI elements, and anything that moves on the page.

CSS Animation Syntax

animation: name duration timing-function delay iteration-count direction fill-mode;

Example of the shorthand in use:

animation: slideUp 0.6s ease-out 0s 1 normal both;

CSS Animation Properties Explained

animation-name

The name of the @keyframes block to apply. This links the animation property to the keyframe definition. Names are case-sensitive and must match exactly.

animation-name: fadeIn;

animation-duration

How long one full cycle of the animation takes. Accepts seconds (s) or milliseconds (ms). There is no default: this must be set or the animation will not run.

animation-duration: 0.5s; /* or 500ms */

animation-timing-function

Controls the speed curve of the animation: how it accelerates and decelerates through each cycle.

• ease: Starts slow, speeds up, then slows at the end. The default. Natural feel.
• ease-in: Starts slow, ends fast. Good for exit animations.
• ease-out: Starts fast, ends slow. Good for entrance animations.
• ease-in-out: Slow start and end. Smooth, balanced feel.
• linear: Constant speed throughout. Good for loaders and spinners.
• cubic-bezier(x1, y1, x2, y2): A custom easing curve you define with four control points. Use this generator's Custom cubic-bezier option to build overshoot, elastic, or "back" style easing that the keyword values cannot produce.
• steps(n): Jumps between a fixed number of steps instead of a smooth curve. This is the timing function typewriter and text-reveal animations use instead of a normal easing curve.

animation-delay

How long to wait before the animation starts. Useful for staggering multiple elements. A negative delay starts the animation partway through its first cycle.

animation-delay: 0.3s;

animation-iteration-count

How many times the animation repeats. Use a number for a fixed count or infinite to loop forever. Fractional values like 0.5 run half a cycle.

animation-iteration-count: infinite; /* or 1, 2, 3... */

animation-direction

Controls whether the animation plays forward, backward, or alternates direction on each cycle.

• normal: Plays forward every cycle. Default.
• reverse: Plays backward every cycle.
• alternate: Forward on odd cycles, backward on even cycles. Good for ping-pong effects.
• alternate-reverse: Backward first, then forward.

animation-fill-mode

One of the most misunderstood properties. It controls what styles are applied to the element before the animation starts and after it ends.

• none: Element returns to its original style before and after. Default.
• forwards: Element keeps the styles from the last keyframe after the animation ends.
• backwards: Element takes on the styles of the first keyframe during the delay period.
• both: Applies both forwards and backwards. Almost always what you want for entrance animations.

If your animated element flickers or jumps when a delay is set, missing animation-fill-mode: both is usually the cause.

animation-play-state

Pauses or resumes an animation. Useful for pause buttons or hover-to-pause effects.

animation-play-state: paused; /* or running */

What Are Keyframes in CSS Animation?

Keyframes define what an element looks like at specific points during an animation. You declare them with @keyframes followed by the animation name, then use percentages (or from / to keywords) to set styles at each checkpoint.

@keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }

You can have as many keyframe steps as needed. The browser automatically interpolates the styles between each step.

Common CSS Animation Examples & Effects

Fade In on Page Load

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .hero { animation: fadeIn 0.8s ease-out both; }

Slide Up Entrance

@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .card { animation: slideUp 0.5s ease-out both; }

Staggered List Items

Apply increasing delays to create a cascading entrance effect:

.item:nth-child(1) { animation-delay: 0s; } .item:nth-child(2) { animation-delay: 0.1s; } .item:nth-child(3) { animation-delay: 0.2s; }

Infinite Loading Spinner

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { animation: spin 0.8s linear infinite; }

Animated Gradient Background

A shifting gradient background is one of the most requested animation effects, and it needs a larger gradient painted behind the element so it has room to move. Pick your colors with the gradient generator first, then animate the position:

@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-bg { background: linear-gradient(270deg, #7c6af7, #22d3ee, #f472b6); background-size: 200% 200%; animation: gradientShift 6s ease infinite; }

The background-size must be larger than 100% or there is nothing for background-position to move across, so the gradient will appear static even though the animation is running.

Button Hover / Click Animation

Buttons usually only need a transition for hover states, but a short keyframe animation adds a satisfying pulse or bounce on click that a transition alone cannot do:

@keyframes btnPulse { 0% { transform: scale(1); } 50% { transform: scale(0.92); } 100% { transform: scale(1); } } .btn:active { animation: btnPulse 0.3s ease-out; } .btn { transition: background-color 0.2s ease, transform 0.2s ease; } .btn:hover { transform: translateY(-2px); }

Text Reveal (Typewriter) Animation

A typewriter effect combines a width animation with the steps() timing function so text appears to type out character by character instead of stretching smoothly:

@keyframes typing { from { width: 0; } to { width: 100%; } } .typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid #7c6af7; width: 0; animation: typing 3s steps(30, end) forwards, blink 0.7s step-end infinite; } @keyframes blink { 50% { border-color: transparent; } }

CSS Animation vs CSS Transition

These two features overlap but serve different purposes:

• Transitions: React to a state change (like hover or focus). Simple two-state: before and after. Cannot loop. Cannot have multiple steps.
• Animations: Run automatically or on command. Can have unlimited keyframe steps. Can loop infinitely. Can be delayed, reversed, or paused.

Use transitions for simple hover effects. Use animations for entrance effects, loaders, and anything that runs on its own.

Using This Animation in Tailwind CSS

The CSS this generator outputs works in any project, including ones built with Tailwind. Tailwind already ships four built-in animation utilities: animate-spin, animate-pulse, animate-ping, and animate-bounce, so for those effects custom CSS may not be needed at all.

For anything else (fade, slide, shake, zoom, or the gradient shift above), copy the generated @keyframes block and animation values into a Tailwind v4 project using the @theme directive:

@theme { --animate-fade: fade 1s ease-out both; @keyframes fade { from { opacity: 0; } to { opacity: 1; } } }

This makes animate-fade available as a utility class directly in markup, no config file or plugin required. In Tailwind v3 projects, the same keyframes and animation values go inside theme.extend.keyframes and theme.extend.animation in tailwind.config.js instead.

How to Use This Generator

The goal is the same copy-paste CSS you would normally hunt for in a CodePen demo, except it is built to your exact settings instead of someone else's.

1. Click an animation type from the buttons at the top
2. Watch the live preview to see it in action
3. Adjust Duration to control how fast or slow it plays
4. Set a Delay if you want it to start after a pause
5. Change Iterations to run it a set number of times or loop infinitely
6. Pick a Timing Function to change the feel of the motion
7. Click Copy CSS: the output includes both the @keyframes block and the full animation shorthand

Frequently Asked Questions

Why is my CSS animation not working?

The most common causes are: missing animation-duration (required, there is no default), the @keyframes name not matching the animation-name exactly, or the element having display: none which prevents animations from running.

How do I pause a CSS animation on hover?

Use animation-play-state: paused on the hover state: .element:hover { animation-play-state: paused; } This freezes the animation at its current position while the user hovers, then resumes when they move away.

What does animation-fill-mode: both do?

It applies the starting keyframe styles during any delay period (so the element does not flash its original style before the animation starts) and keeps the ending keyframe styles applied after the animation finishes. For most entrance animations, both is the correct value.

Can I run multiple animations on the same element?

Yes. Separate each animation value with a comma: animation: fadeIn 0.5s ease both, pulse 2s ease-in-out 0.5s infinite; Each animation runs independently with its own duration, delay, and iteration settings.

What is the difference between animation-direction: alternate and reverse?

reverse plays the keyframes backward on every single cycle. alternate plays forward on odd cycles and backward on even cycles, creating a ping-pong effect. Use alternate for breathing, pulsing, or back-and-forth animations.

Do CSS animations affect page performance?

Animations that use only transform and opacity are highly performant because they run on the GPU and do not trigger layout recalculation. Avoid animating properties like width, height, top, or margin as these force the browser to recalculate layout on every frame, which causes jank.

Is this an AI CSS animation generator?

No, and that is the advantage. This is a rule-based generator that renders standard CSS animation syntax instantly, so the same settings always produce the same predictable, editable code. AI animation tools can be inconsistent or add extra dependencies. This generator just outputs plain CSS you fully control.

Does this generator work with Tailwind CSS?

Yes. The CSS output (the @keyframes block and the animation shorthand) can be pasted into any Tailwind project, including Tailwind CSS v4 using the @theme directive with a custom --animate-* variable so it becomes a reusable animate-* utility class. For simple spin, pulse, ping, or bounce effects, Tailwind's built-in animate-spin, animate-pulse, animate-ping, and animate-bounce utilities may already cover the effect without any custom CSS.

Can I use a custom cubic-bezier easing curve instead of ease or linear?

Yes. Choose Custom cubic-bezier from the Timing Function dropdown to set your own four control point values (X1, Y1, X2, Y2). This gives full control over acceleration and overshoot, useful for bounce-like or elastic effects that the standard keyword values cannot produce.