CSS animation demo & generator
Explore 28 hand-written keyframe animations (fade, four-way slide, zoom, rotate, bounce, shake, pulse, blink, swing, heartbeat, flip, ripple, typewriter, skeleton, spinner, progress bar, gradient flow, floating card and more) with duration, delay, easing, iteration, direction and fill-mode controls, live playback and CSS output.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Live preview
Play restarts the animation so you can watch the easing again
uk-fade-in 600ms ease-out 0ms 1 normal bothAnimation library
28 hand-written keyframe animations — click one to preview it
Animation settings
CSS code
Includes the @keyframes block and a class that uses it
@keyframes uk-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.uk-animated {
animation: uk-fade-in 600ms ease-out 0ms 1 normal both;
}Copy · Includes the @keyframes block and a class that uses it
What this tool does
- Add an entrance animation to a button, card or dialog: pick one of 28 hand-written keyframe sets, tune the timing, then paste the generated CSS straight into your project.
- Keep motion parameters consistent across a team — duration, delay, easing, iteration count, direction and fill mode live in one place, and the exported animation shorthand never drops a field.
- Debug an animation that refuses to run by isolating the @keyframes block and checking whether the name, fill mode or iteration count is the culprit.
- Preview an effect on demand while teaching or writing docs, replaying it to compare linear against ease-out.
Example
Input
Animation: Fade in (fade-in), duration 600ms, delay 0ms, easing ease-out, 1 iteration, direction normal, fill mode both
Output
@keyframes uk-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.uk-animated {
animation: uk-fade-in 600ms ease-out 0ms 1 normal both;
}Keyframe names are prefixed with uk- so they never clash with animations already in your stylesheet; fill mode both keeps the first frame before the animation starts and the last frame after it ends.
Frequently asked questions
Why do the generated keyframes have a uk- prefix?
Animation names are global, so two identically named @keyframes blocks overwrite each other. The prefix makes the snippet safe to paste as-is. If you prefer your own name, rename it in the @keyframes line and in the first part of the animation shorthand.
Why does my element snap back when the animation finishes?
Almost always the fill mode is none. The default here is both, which applies the 0% styles before the animation starts and keeps the 100% styles after it ends. If you only need the end state to stick, forwards is enough.
Can I drop the 0ms from the shorthand?
Yes, but keep it. In the animation shorthand the first time value is the duration and the second is the delay; with only one value the delay defaults to 0. Writing `600ms ease-out 0ms` explicitly stops you from mixing the two up later.
What are the limits on duration and iterations?
Duration must be between 1 and 60000 ms, and iterations must be an integer from 1 to 1000 or infinite. Values outside those ranges produce an error instead of CSS the browser would silently ignore.
Are these animations licensed, and do they load anything from the network?
All 28 keyframe sets are hand-written in this page — no animate.css or other third-party library is pulled in, and there are no network requests. The code you copy is the final code.
Keywords：cssanimationkeyframesanimate动画关键帧过渡缓动前端动效animation generator