Free · Private · No signup
CSS Animation Builder
Generate @keyframes visually — presets or a custom timeline — then copy-paste CSS into any stylesheet. Duration, easing, and live preview run in your browser.
Presets
Animation preset
Starting @keyframes — then tune timing below.
Timing
How long the animation runs and how often.
A number, or infinite to loop.
Easing & fill
Timing function and what happens before/after.
Maps to animation-timing-function.
both keeps start styles during delay and end styles after the run.
Copy CSS
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.element {
animation: fadeIn 1s ease 0s 1 both;
}A CSS animation generator that writes real @keyframes
Hand-writing keyframes is slow when you just need a fade-in or a button bounce. This @keyframes generator lets you pick a preset, tune duration and easing, or place stops on a timeline, then copy CSS (or Tailwind / React). Pair motion with the CSS Gradient Generator for backgrounds, or trigger on scroll with the Scroll Animation Generator.
Replay fade, slide, bounce, and custom keyframes on a box, button, card, or text target.
Export @keyframes plus the animation shorthand — or Tailwind config and a React snippet.
Add keyframes on a visual timeline and set translate, scale, rotate, and opacity at each stop.
100% client-side. Presets and custom CSS never leave this tab.
How to use the CSS animation builder
- 1
Pick a preset or start custom
Choose fade, slide, zoom, or attention effects — or switch to Custom and place keyframes on the timeline.
- 2
Set duration, delay, and easing
Duration is how long one cycle lasts. Delay waits before it starts. Easing is the timing function (ease, linear, bounce).
- 3
Preview on a real target
Replay on Auto, or force box / button / card / text so you can see how the motion reads in UI.
- 4
Copy the CSS
Paste @keyframes and the animation property into your stylesheet. Rename the class and keyframe name if you need several animations on one page.
Frequently asked questions
What is a CSS @keyframes animation?
@keyframes defines how an element looks at points along a timeline (0% to 100%). The animation shorthand then sets duration, easing, delay, iteration count, and fill mode. This generator writes both the @keyframes block and the animation property for you.
How do I copy the CSS into my project?
Use the CSS tab, copy, and paste the @keyframes rule plus the .element { animation: … } declaration into your stylesheet. Rename .element to your class. Tailwind and React/Framer snippets are in the other tabs.
What easing should I use?
ease is a good default. linear is for loaders and progress. ease-out feels snappy on entrances. ease-in-out is smoother for looping motion. The Bounce option is a cubic-bezier overshoot — use it for playful UI, not for subtle fades.
What does animation-fill-mode do?
Fill mode controls styles before and after the animation. both (the default here) applies the 0% styles during delay and keeps the 100% styles after it ends — what you usually want for fade-ins. none resets to the element’s normal CSS when the animation is not running.
Does this CSS animation generator upload my code?
No. Presets, custom keyframes, and export run entirely in your browser. Nothing is sent to a server.
Can I chain several animations?
Yes. Chain mode sequences presets with per-step duration, delay, and easing. CSS can only apply one transform at a time, so mix transform animations with opacity or filter steps if you need them to overlap.
Is this @keyframes generator free?
Yes. No signup, no watermark, unlimited copy-paste CSS.