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. See the CSS animation guide for a full breakdown of animation vs transition.

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;

The Controls on This Generator

Duration

How long one full cycle of the animation takes. There is no default: this must be set or the animation will not run. Drag the Duration slider to adjust it live.

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. Choose Custom cubic-bezier above to build overshoot, elastic, or "back" style easing that the keyword values cannot produce.

Delay

How long to wait before the animation starts. Useful for staggering multiple elements, for example applying a slightly longer delay to each item in a list.

Iterations

How many times the animation repeats. Drag the slider all the way right for infinite, or set a fixed number of cycles.

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. You can have as many keyframe steps as needed; the browser automatically interpolates the styles between each step.

Two Effects Worth a Closer Look

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, which is not one of the options in the Timing Function dropdown above, 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; } }

For the rest of the ready-to-use patterns (fade in, slide up, staggered lists, spinners, skeleton loaders, and more), plus the full properties reference, timing function table, and performance rules, see the CSS animation guide.

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. This generator always outputs both for that reason.

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.

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.

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.