CSS Animation Generator

What this tool does

CSS Animation Generator builds a complete @keyframes animation plus its animation shorthand from common motion presets, fade in, slide in, bounce, pulse, spin and shake, with adjustable duration, iteration count, direction and fill mode, previewed live and ready to copy as full working CSS.

Writing a @keyframes animation from scratch, plus correctly pairing it with the animation shorthand’s duration, iteration count, direction and fill mode, is easy to get subtly wrong (a forgotten fill-mode, a reversed direction) without a live preview to check against.

This tool generates the full @keyframes block for a chosen common motion preset (fade, slide, bounce, pulse, spin, shake), lets you tune duration, repeat count, direction and fill mode, and previews the result live, giving you complete, ready-to-use CSS.

How to use CSS Animation Generator

1. Choose an animation preset.
2. Adjust duration, iteration count, direction and fill mode.
3. Watch the live preview (press Replay to see it again).
4. Copy the complete @keyframes + animation CSS.

Tips for better results

• animation-fill-mode: both (the default here) keeps the animation’s starting state applied before it begins and its ending state applied after it finishes, without it an element can "snap back" to its original un-animated state once the animation ends.
• animation-direction: alternate makes an infinite animation play forward then backward on each cycle, rather than always restarting from the beginning, useful for a smooth back-and-forth pulse or bounce.
• Rename the generated "customAnim" keyframes name and ".element" selector to match your actual CSS class and a distinct name if you have multiple animations on a page, to avoid naming collisions.
• Pair a punchier easing curve (like the ease-in-back preset from the Cubic Bezier Generator) with these presets for a more dynamic feel than the default ease timing function.

Common use cases

• Adding a fade-in or slide-in entrance animation to a page element.
• Creating an attention-grabbing pulse, bounce or shake effect for a notification or alert.
• Building a continuous spin animation for a loading indicator.
• Prototyping a UI micro-interaction’s motion before implementing it in production code.

Common mistakes to avoid

• Omitting animation-fill-mode and being surprised the element "snaps back" to its pre-animation state immediately after the animation finishes; both (included by default here) keeps the animation’s start/end states applied outside its active duration.
• Using infinite iteration count for an entrance animation (like fadeIn or slideInUp), which should normally run once; infinite is better suited to continuous effects like spin, pulse or bounce.
• Forgetting to rename the generated keyframes name if adding multiple different animations to the same page, reusing "customAnim" for two different motions will cause one to silently override the other.