Use the CSS Animation Generator to build custom @keyframes animations and copy the finished CSS straight into your project — no manual keyframe math, no guessing at timing functions.
Pick a preset to start, or build an animation step by step: set how each property changes at 0%, 50%, 100% (or any step in between), adjust duration, delay, easing, and repeat behavior, then copy the generated code into your stylesheet.
Start from a preset
Pick one to load it into the editor, then tweak any step.
Keyframe steps
Generated CSS
How It Works
The tool turns your keyframe steps into a standard CSS @keyframes rule plus a matching class. Each step you define — a percentage point like 0% or 50% — becomes one block in the keyframes rule, with only the properties you actually changed (position, scale, rotation, skew, opacity, background color) written into that block. Your duration, delay, timing function, iteration count, direction, and fill-mode settings are compiled into the animation shorthand properties on the class itself. The result is clean, minimal CSS — no unused declarations, no extra properties you didn’t set.
When to Use a CSS Animation Generator
- Hover and micro-interactions — button states, icon reveals, and small feedback animations that make an interface feel responsive, without hand-writing keyframes from scratch.
- Loading and attention states — pulse, bounce, and shake effects for loaders, notifications, or form validation cues.
- Entrance animations — fade-ins and slide-ins for content that appears on scroll or on page load, common in landing pages and portfolio sites.
- WordPress theme customization — for freelancers and agencies adding custom animation to a client site’s theme or page builder, pasting generated CSS into a Custom HTML block or the site’s custom CSS panel is faster than writing keyframes manually for every project.
Frequently Asked Questions
How do I create a CSS animation?
Define a @keyframes rule with percentage steps describing how an element should look at each point in the animation, then apply it to an element with the animation property (or its longhand parts: animation-name, animation-duration, animation-timing-function, and so on). This generator builds both parts for you from the steps and settings you choose.
How does @keyframes work in CSS?
A @keyframes rule names an animation sequence and lists what an element’s styles should be at specific percentages of the animation’s duration — 0% is the start, 100% is the end, and any percentage in between marks an intermediate state. The browser interpolates smoothly between each step.
How do I add an animation to a CSS class?
Give the element a class, then in that class’s CSS rule set animation-name to match your @keyframes name, along with animation-duration and any other timing properties you want. This tool generates that class automatically, so you can copy it directly under the class name shown in the output.
What’s the difference between a CSS animation and a CSS transition?
A transition interpolates between two states (a starting style and an ending style) and needs a trigger like :hover or a class change. An animation, defined with @keyframes, can include multiple steps and run independently, on a loop, or automatically on page load, without needing a trigger event.
Is this CSS animation generator free to use?
Yes — it runs entirely in your browser, requires no signup, and the generated CSS is yours to use in any project, commercial or personal.
Can I use the generated CSS in WordPress?
Yes. Paste the generated CSS into your theme’s custom CSS panel (Appearance → Customize → Additional CSS), a Custom HTML block, or your child theme’s stylesheet, then add the class name to the element you want animated.
Why does my animation only play once on page load?
By default, animation-iteration-count is set to 1, so the animation runs a single time. Turn on the “Infinite” option in this generator’s settings if you want the animation to loop continuously, or set a specific iteration count.