Writing a CSS keyframe animation from scratch means defining percentage-based steps and the right easing to get a natural-feeling motion, which takes some trial and error to get right. This tool provides five common animation patterns ready to preview and copy.
Pick an animation type — bounce, fade, spin, pulse, or shake — adjust the duration, and watch the live preview box demonstrate it immediately, looping continuously so you can judge the timing and feel.
Once it looks right, copy the full @keyframes block plus the animation property declaration, both ready to paste directly into your stylesheet and apply to any element.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
Frequently asked questions
Can I apply this to any HTML element?
Yes, the generated CSS is a standard @keyframes animation plus the animation property — apply the class or animation declaration to whichever element you want animated.
Does the animation loop forever in the generated CSS?
The preview loops continuously so you can evaluate the timing; the copied CSS defaults to infinite looping too, which you can change to a specific count or 'forwards' as needed for your use case.