liminfoCSS Animation Generator
Free web tool: CSS Animation Generator
Preset Library (51 total)
Keyframes
@keyframes myAnimation {
0% {
transform: translateX(0px);
opacity: 1;
background-color: #3b82f6;
}
50% {
transform: translateX(100px) rotate(180deg);
opacity: 0.5;
background-color: #8b5cf6;
}
100% {
transform: translateX(0px) rotate(360deg);
opacity: 1;
background-color: #3b82f6;
}
}
.animated-element {
animation: myAnimation 1s ease infinite normal;
}About CSS Animation Generator
The CSS Animation Generator is a visual editor for creating CSS @keyframes animations directly in your browser. You define animation properties — name, duration in seconds, easing function (ease, linear, ease-in, ease-out, ease-in-out), iteration count, and direction — and then build individual keyframes by specifying each keyframe's percentage offset, CSS transform value, opacity, and background color. The tool sorts keyframes by offset and assembles a complete, valid @keyframes block alongside an .animated-element class declaration with the full animation shorthand property.
Web designers, UI/UX engineers, and front-end developers use this tool to prototype and fine-tune CSS animations without touching code. A live preview box displays the animation in real time as you adjust settings, showing the actual motion of a rounded element with the configured keyframes. This eliminates the slow edit-save-reload cycle that comes with writing animation CSS by hand. Once satisfied, you copy the generated CSS block with one click and paste it directly into your stylesheet.
Technically, the tool maintains a sorted array of keyframe objects in React state and uses `useMemo` to recompute the CSS string on every change. The live preview injects the computed @keyframes rule into a `<style>` tag via `dangerouslySetInnerHTML`, applying it to a preview element with the exact animation parameters. Because everything runs in the browser, there is no network latency and your animation definitions stay private on your device.
Key Features
- Visual @keyframes editor with per-keyframe offset, transform, opacity, and background-color controls
- Animation name, duration (seconds), easing function, iteration count, and direction settings
- Live animated preview box that renders the actual keyframe motion in real time
- Add or remove individual keyframes dynamically — supports any number of keyframes
- Easing options: ease, linear, ease-in, ease-out, ease-in-out
- Iteration options: infinite, 1, 2, 3, or 5 repeats
- Generates complete @keyframes block plus .animated-element class with animation shorthand
- One-click copy of the full CSS code block to clipboard
Frequently Asked Questions
What is a CSS @keyframes animation?
A CSS @keyframes rule defines the sequence of styles an element transitions through during an animation. Each keyframe specifies a percentage offset (0% to 100%) and the CSS properties that apply at that point in the timeline. You attach the animation to an element using the animation shorthand property, which sets the name, duration, easing, and iteration count.
How do I control animation speed with easing functions?
The easing function (also called timing function) controls how the animation accelerates and decelerates between keyframes. "linear" maintains constant speed. "ease" starts slow, speeds up, then slows down. "ease-in" starts slow and accelerates. "ease-out" starts fast and decelerates. "ease-in-out" is slow at both ends. For fine-grained control, you can manually type a cubic-bezier() value in the transform field.
What CSS transform values can I use in a keyframe?
CSS transform supports translateX(), translateY(), rotate(), scale(), skew(), and their combined forms. The generator accepts any valid transform value you type, such as "translateX(100px) rotate(180deg)" or "scale(1.5)". Multiple transform functions are space-separated in a single transform property value.
How does the live preview work?
The generator injects your keyframe definitions into a <style> tag in the page using a "preview" keyframe name, and applies it to a small rounded element with matching duration, easing, and iteration settings. This means you see the actual CSS animation running in the browser as you type, with no rendering engine differences between the preview and production.
What does animation-direction do?
The animation-direction property controls whether the animation plays forward, backward, or alternates. "normal" plays from 0% to 100% each iteration. "reverse" plays from 100% to 0%. "alternate" reverses direction on even-numbered iterations, which is useful for creating seamless back-and-forth effects without duplicating keyframes.
How do I make an animation play only once?
Set the iteration count to 1. The animation will play through all keyframes once and stop at the final state. If you want the element to remain at the 100% keyframe state after the animation ends, add animation-fill-mode: forwards to the .animated-element class in your CSS.
Can I create a fade-in animation with this tool?
Yes. Create two keyframes: set offset 0% with opacity 0 and offset 100% with opacity 1. Set the transform to "none" for both keyframes if you only want opacity to change. Adjust the duration to your desired fade speed and set the iteration count to 1 for a one-time fade-in.
How do I use the generated CSS in my project?
Copy the generated CSS block and paste it into your stylesheet. Apply the animation by adding the class "animated-element" to the HTML element you want to animate, or rename the class in your stylesheet to something more descriptive. You can also copy just the @keyframes rule and write your own animation property in a different selector.