CSS Animation Generator
Build CSS keyframe animations visually. Set duration, easing, delay, iteration and animated properties, then copy the ready-to-use CSS. Free, browser-based.
💻 Developer Tools
Free
Browser-based
s
CSS Animation Properties
| Property | Description |
|---|---|
animation-duration | How long one cycle takes (e.g. 1s, 500ms) |
animation-timing-function | Easing curve — controls acceleration |
animation-delay | Wait before starting (useful for staggering) |
animation-iteration-count | Number of cycles, or infinite |
animation-direction | Forward, reverse, or alternating |
animation-fill-mode | What styles apply before/after the animation |
Tips
Use animation-fill-mode: forwards to keep the element in its final animated state after finishing. For staggered lists, apply the same animation with increasing animation-delay on each item. Prefer transforming transform and opacity for smooth GPU-accelerated animations — avoid animating width, height or top/left.