CSS Keyframe Animation Generator
Build CSS keyframe animations without writing them by hand. Choose a preset such as fade-in, slide, zoom, spin, pulse or shake, adjust the duration, timing function, delay, iterations and direction, then copy the ready @keyframes and animation rule.
How to generate a CSS animation
- Pick a preset animation like fade-in, slide-in-left, spin or bounce.
- Set the duration, timing function, delay, iteration count and direction.
- Watch the live preview, then copy the generated @keyframes and animation CSS.
Examples
Infinite spin
preset: "spin", duration: "2s", timing: "linear", iterations: infinite
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } animation: spin 2s linear 0s infinite normal forwards;Simple fade in
preset: "fade-in", duration: "1s", timing: "ease-in-out"
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } animation: fade-in 1s ease-in-out 0s 1 normal forwards;Frequently asked questions
What is a CSS keyframe animation?
A keyframe animation defines how an element looks at points along a timeline using a @keyframes block, then plays it with the animation property. Each percentage from 0% to 100% holds the styles for that moment, and the browser tweens between them.
What does each animation setting do?
Duration sets how long one cycle takes, the timing function controls acceleration, and delay waits before starting. Iteration count is how many times it runs (or infinite), and direction decides whether it plays forward, reverse or alternates back and forth.
How do I make the animation loop forever?
Set the iteration count to infinite. The tool writes animation: name duration timing delay infinite ... so the animation restarts continuously. Pair it with the alternate direction if you want it to play forward then backward each cycle.
Why does my animation snap back at the end?
By default an element returns to its original styles when the animation finishes. This tool sets fill-mode to forwards so the last keyframe sticks, which is why fades and slides hold their final state instead of jumping back.
Do these animations work in every browser?
Yes. Unprefixed @keyframes and the animation shorthand are supported in every current browser, including Chrome, Firefox, Safari and Edge, so the copied CSS works without vendor prefixes.
Is my animation sent to a server?
No. The keyframes, the preview and the generated CSS are all built in your browser as you edit, so nothing about your settings leaves your device.
Related tools
Cubic Bezier Generator
Build a custom CSS cubic-bezier() easing curve by dragging two control points. Preview the animation, pick a preset and copy the timing function.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.