CSS Animation Generator
Build custom CSS keyframe animations visually. Pick a preset, adjust properties with live sliders, and export clean CSS, Tailwind, or React code instantly.
Animation Presets
— click any to load instantlyAnimation Settings
Keyframe Editor — 0%
Live Preview
Timeline — 5 keyframes
Generated Code
@keyframes bounce {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
opacity: 1;
background: #8b5cf6;
}
25% {
transform: translateX(0px) translateY(-50px) rotate(0deg) scale(1);
opacity: 1;
background: #8b5cf6;
}
50% {
transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
opacity: 1;
background: #8b5cf6;
}
75% {
transform: translateX(0px) translateY(-25px) rotate(0deg) scale(1);
opacity: 1;
background: #8b5cf6;
}
100% {
transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
opacity: 1;
background: #8b5cf6;
}
}
.animated-element {
animation: bounce 1s ease infinite;
}Tip: Add the animated-element class to any HTML element to apply this animation.
Free CSS Animation Generator — Build Keyframe Animations Visually
CSS animations can make your website feel alive. A smooth fade-in, a bouncing button, or a subtle pulse effect dramatically improves user engagement. But writing keyframe animations by hand takes time — especially when you need to adjust multiple properties across several keyframes.
The OmniWebKit CSS Animation Generator removes that friction entirely. It gives you a visual, real-time editor where you adjust transform values, opacity, colours, timing, and more with simple sliders — and watch your animation play instantly. When done, export clean CSS, a Tailwind config snippet, or a React/Emotion code block.
No design software or Node.js required. Whether you are a frontend developer, a designer who codes, or a beginner learning CSS, this tool makes animation accessible to everyone.
How to Create a CSS Animation in 5 Steps
Choose a preset or start from scratch
Click any of the 12 animation presets — bounce, fade in, slide in, shake, heartbeat, spin, and more — to load a ready-made animation. You can customise it further or build your own from nothing.
Adjust the animation settings
Set the duration in seconds, choose a timing function (ease, linear, ease-in-out, or cubic-bezier), configure the iteration count, and optionally set direction and fill mode for precise control.
Edit keyframes with sliders
Click any keyframe dot on the timeline to select it. Use sliders to adjust X/Y position, rotation, scale, and opacity. Pick a background colour with the combined colour picker and text input.
Add or remove keyframes
Click Add to insert a new keyframe. Delete any keyframe you do not need (minimum two keyframes required). Each keyframe appears as a coloured dot on the timeline — its colour matches the element background at that point.
Export your code
Switch between CSS, Tailwind, and React output using the tabs. Click Copy to grab the code, or Download to save it as a file. Paste directly into your project — no edits required.
CSS Animation Properties Explained
Understanding what each property controls will help you get the effect you want. Here is a plain-English breakdown of the key settings in this tool.
animation-durationHow long one cycle of the animation takes. 0.5s is fast (good for UI feedback). 2s is moderate. 4s+ is slow and decorative. Shorter durations keep interactions feeling snappy and responsive.
animation-timing-functionControls the speed curve. Ease starts slow, speeds up, then slows down. Linear stays constant throughout. Ease-in-out is the most natural-feeling for most UI elements — slow start, fast middle, slow end.
animation-iteration-countHow many times the animation plays. Use 1 for one-time entrances (fade in, slide in). Use infinite for continuous effects (spinner, heartbeat). Use a fixed number like 3 for short repeating alerts.
animation-directionNormal plays keyframes forward. Reverse plays them backward. Alternate goes forward then backward — great for back-and-forth motion without duplicating keyframes. Alternate-reverse starts in reverse.
animation-fill-modeForwards holds the final keyframe style after the animation ends. Backwards applies the first keyframe style during the animation delay. Both combines both behaviours for maximum control.
transformHandles movement (translateX/Y), rotation, and scaling in one GPU-accelerated property. Animating transform is much more performant than animating position (top/left) or dimensions, making it the right choice for smooth animations.
opacityControls transparency from 0 (invisible) to 1 (fully visible). Like transform, opacity animation is GPU-accelerated. Combining opacity and transform gives you smooth, performant fade and motion effects with no layout reflow.
CSS, Tailwind, and React Output Explained
This tool generates three output formats. Here is when to use each one based on your tech stack.
CSS
Standard @keyframes + .animated-element class. Works in any HTML, React, Vue, or Angular project. Paste into any .css or .scss file.
Tailwind
Extends tailwind.config.js with custom keyframes and animation shorthand. Use animate-yourName directly as a class — no CSS file needed.
React
Uses @emotion/react to define animations as JavaScript template literals. Ideal for CSS-in-JS projects using Emotion, Styled Components, or similar libraries.