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.

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

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; }

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.

How to Use This Generator

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.