CSS Keyframe Animation Builder (Create @keyframes Online)
Writing CSS `@keyframes` logic entirely by hand requires a lot of mental overhead and constant browser refreshing. This visual builder allows you to construct complex, multi-stage CSS animations, edit their timing functions natively, and preview the exact animation rendered directly in the DOM.
100% Private & Secure
This tool runs completely inside your browser using client-side WebAssembly and JS. Zero data is ever sent to our servers.
How to use this tool
- Define an animation name, duration, and iteration rules in the top-left settings pane.
- Add new 'Keyframe Timestamps' (percentages between 0% and 100%).
- Write pure inline CSS (e.g., `transform: scale(1.2); opacity: 0.5;`) within each timestamp block.
- Watch the blue preview square animate instantly as you type.
- Copy the fully compiled CSS output block from the bottom right.
Example Usage
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }[ Generates a smoothly spinning infinite spinner ]
When to use this tool
- Quickly generating customized loading spinners, pulse effects, or bouncing indicators for a modern web app.
- Understanding how the `ease-in-out` timing function differs from a strict `linear` progression visually.
- Combining multiple transform commands (translate, rotate, and scale) across 5 or 6 different timeline phases.
Frequently Asked Questions
How does the Live Preview work?
The tool works by dynamically injecting your generated `@keyframes` syntax directly into a `<style>` block within the React Virtual DOM, and immediately applying the compiled class to the preview window. It literally runs your exact CSS through the browser engine in real-time.
What is the difference between ease-in and ease-out?
A timing function dictates the rate of change over time. 'ease-in' starts the animation slowly and accelerates towards the end. 'ease-out' starts quickly and decelerates to a slow stop. 'ease-in-out' combines both, creating a smooth transition at both boundaries.
Can I animate any CSS property?
You can animate most visual CSS properties (colors, borders, opacity). However, for maximum performance in modern browser rendering engines (60fps), you should strictly try to animate only the `transform` and `opacity` properties, as they do not trigger costly DOM layout reflows.
Why doesn't my box shadow animate perfectly smoothly?
Animating massive CSS modifications like `box-shadow` or `width/height` forces the browser's main thread to repaint the screen every frame. If your machine is older or under heavy JS load, these specific properties may appear to stutter or drop frames.
Do I need vendor prefixes like -webkit-?
For modern development workflows, no. Modern browsers widely support the standard `@keyframes` rule. If you must support severely outdated mobile browsers, your build system's Auto-Prefixer pipeline will handle injecting `-webkit-` automatically upon compile.