UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Keyframes Generator

Compose starter animations with timing controls and copy @keyframes blocks.

About CSS Keyframes Generator

CSS animations defined by @keyframes let you bring interfaces to life with fades, slides, bounces, and rotations that play without any JavaScript. Writing keyframe blocks from scratch — managing percentage stops, timing functions, and the animation shorthand — is tedious when you just want to test whether a card slides up nicely or a badge pulses at the right speed. The CSS Keyframes Generator gives you an editable timeline with stops at any percentage, property value inputs at each stop, and a live animated preview that loops as you work. Start from a preset like fadeInUp, pulse, or spin, then modify the stop values and easing until the motion feels right. The output includes the complete @keyframes block and the animation shorthand declaration together.

Why use CSS Keyframes Generator

Timeline Editor

Add percentage stops at any point in the animation and assign different property values at each stop. Unlike transitions with only a from and to state, a keyframes timeline can define acceleration, holds, bounces, and reversals across as many stops as the motion requires.

Common Presets

Load proven animation patterns like fadeInUp, slideDown, pulse, shake, and spin with one click. Presets include all keyframe stops and timing values tuned for the effect, giving you a working animation to modify rather than starting every motion from scratch.

Easing Picker

Select from linear, ease, ease-in, ease-out, ease-in-out, or enter a custom cubic-bezier curve to fine-tune acceleration. A visual easing curve preview shows how the animation progresses over time, making it easy to match the physical feel you want.

Property Mix

Animate opacity, transform functions, color, background-color, and other properties simultaneously across stops. Multiple properties at a single stop let you coordinate a fade-in with a translate in one keyframe block without separate animations.

Live Preview

A sample element loops the animation continuously as you adjust values so you see the motion immediately. Change a stop value and the next loop iteration shows the result. No reloading, no toggling dev tools — purely iterative motion design.

Copy Block

The output includes the named @keyframes block and the animation shorthand property together. Forgetting to add the animation declaration after writing keyframes is a common mistake; this generator outputs both so the element animates immediately after pasting.

How to use CSS Keyframes Generator

Add keyframe stops at the percentages you need — from/to for simple two-state animations, or multiple percent stops for staged motion
Set property values at each stop: opacity, transform, color, or any animatable property
Choose an easing function: linear, ease, ease-in-out, or a custom cubic-bezier curve
Set animation duration, iteration count, and fill-mode in the animation shorthand controls
Click a preset to load a proven starting point and modify from there
Click Copy CSS to grab the @keyframes block and the animation declaration together

When to use CSS Keyframes Generator

When adding an entrance animation to a card, toast notification, or modal that should slide and fade in
When building a pulsing badge or notification dot that draws attention without being disruptive
When designing a page-load skeleton screen shimmer that sweeps across placeholder elements
When creating a looping animated illustration or icon that needs multiple motion stages
When adding a shake animation to a form field that has a validation error
When implementing a scroll-triggered reveal animation and need to define the from and to states

Examples

Fade in slide up

Input: from: opacity 0, translateY(20px) → to: opacity 1, translateY(0), duration 0.5s ease-out

Output: @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .item { animation: fadeInUp 0.5s ease-out both; }

Pulse heartbeat

Input: 0%/100% scale(1), 50% scale(1.08), 1.4s ease-in-out infinite

Output: @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .badge { animation: pulse 1.4s ease-in-out infinite; }

Spin loader

Input: from rotate(0deg) → to rotate(360deg), 1s linear infinite

Output: @keyframes spin { to { transform: rotate(360deg); } } .loader { animation: spin 1s linear infinite; }

Tips

Animate transform and opacity exclusively where possible — they are composited on the GPU and produce consistently smooth 60fps motion without triggering layout
Set animation-fill-mode: forwards on entrance animations so the element stays visible after the animation completes instead of snapping back to its initial invisible state
Wrap all non-essential animations in @media (prefers-reduced-motion: no-preference) to respect users with vestibular disorders or motion sensitivity settings
Negative animation-delay (e.g. -0.5s) starts the animation mid-cycle immediately, useful for staggered lists where you want items offset in phase rather than all starting from scratch
Stack multiple opacity and transform stop values in one @keyframes block rather than creating separate overlapping animations for coordinated entrance effects

Frequently Asked Questions

What is the difference between @keyframes and transition?▾

Transitions animate between two states triggered by a user action or state change. @keyframes define multi-stop animations that run on their own timeline, can loop, reverse, delay, and play without any trigger. Use transitions for interactive state changes and keyframes for autonomous, orchestrated motion.

How do I make an animation play once and stop at the end?▾

Set animation-iteration-count: 1 (the default) and animation-fill-mode: forwards. The forwards fill mode keeps the element in the state defined at the final keyframe after the animation completes, preventing it from snapping back to its initial state.

What does animation-fill-mode: forwards do?▾

forwards tells the browser to keep the element in the state of the last keyframe after the animation finishes. Without it, the element snaps back to its pre-animation CSS values, which makes entrance animations suddenly disappear after playing.

How do I pause animation on hover?▾

Add animation-play-state: paused to the :hover rule on the animated element. The animation freezes in place when the cursor enters the element and resumes from the same point when the cursor leaves.

Can I run multiple animations on the same element?▾

Yes. The animation property accepts a comma-separated list of animation values. Each entry in the list corresponds to a separate @keyframes name with its own duration, easing, delay, and iteration count. Multiple animations compose additively on the element.

Should I animate transform or top/left for performance?▾

Always animate transform and opacity when possible. These properties are GPU-composited and do not trigger layout or paint. Animating top, left, width, height, or any layout-affecting property causes layout recalculation on every frame, producing janky animations on complex pages.

What is a cubic-bezier easing curve?▾

cubic-bezier() defines a custom easing curve using four control-point values between 0 and 1. The built-in keyword easings like ease and ease-in-out map to specific cubic-bezier values. Custom curves let you define spring-like overshoots, immediate starts, or exaggerated decelerations.

How do I respect prefers-reduced-motion in animations?▾

Wrap your animation declarations in @media (prefers-reduced-motion: no-preference) { } so they only apply when the user has not requested reduced motion. For motion-critical UIs, provide a static alternative in @media (prefers-reduced-motion: reduce) that conveys the same information without movement.

Explore the category

Glossary

Keyframe: A percentage stop within a @keyframes rule that defines the CSS property values at that point in the animation timeline. 0% is the start; 100% is the end; intermediate stops control the path between.
Animation Timing Function: Controls how an animation progresses over its duration — whether it accelerates, decelerates, or moves at a constant rate. Applied per-keyframe or to the overall animation via the animation-timing-function property.
Cubic Bezier: A mathematical curve defined by four control points used to describe custom animation easing. css built-in easings like ease map to specific cubic-bezier() values; custom curves enable spring, bounce, and other non-standard motion profiles.
Iteration Count: The number of times an animation plays, set by animation-iteration-count. Use a number for finite repetitions or the keyword infinite for continuous looping.
Animation Delay: The time before an animation starts, set by animation-delay. Negative values skip that duration into the animation timeline, useful for staggering items in a list.
Fill Mode: Controls the element's state before or after animation play. forwards keeps the final keyframe state; backwards applies the first keyframe during delay; both applies both behaviors simultaneously.