CSS Keyframe Animation Generator

A CSS keyframe animation defines how an element's style changes over the course of an animation cycle, using the @keyframes at-rule to describe a series of steps (0% to 100%) and the animation shorthand property to apply those steps to an element with a duration, easing, delay, repeat count and direction. Keyframe animations are what let a button pulse, a card fade in, or a notification icon shake — all without JavaScript, and running on the browser's compositor thread for smooth, efficient motion.

This generator builds both halves for you: the @keyframes block with the correct percentage stops and properties for a chosen preset, and the matching .animated-element { animation: ...; } rule that applies it. Copy both into your stylesheet and swap .animated-element for your own selector.

How to use it

1. Pick a preset — Bounce, Shake, Pulse, Fade In, Slide In Left, Spin, Swing, Rubber Band, Flash, or Wobble. Each preset is a ready-made sequence of transform/opacity steps modeled on the well-known effects popularized by animation libraries like Animate.css.
2. Set the duration in seconds — how long one full cycle takes.
3. Choose a timing function — ease, ease-in, ease-out, ease-in-out, or linear — to control the acceleration curve.
4. Set a delay in seconds if you want the animation to wait before starting.
5. Set the iteration count — a whole number like 1 or 3, or infinite to loop forever.
6. Choose a direction — normal plays forward each cycle, reverse plays backward, alternate flips direction every other cycle, and alternate-reverse starts reversed and flips.
7. Copy the generated CSS and paste it into your stylesheet, or download it as a .css file.

FAQ

Why is the selector .animated-element? It's a placeholder so the CSS is ready to paste — rename it to match the element you want to animate (a class, an ID, or any selector).

Can I use these presets with any HTML element? Yes. @keyframes animations apply to any element via the animation property; some presets (like Slide In Left) look best on block-level elements with defined dimensions.

What's the difference between iteration-count: infinite and a number? A number runs the animation that many times and then stops on its final frame (unless animation-fill-mode says otherwise). infinite repeats forever — useful for loaders and spinners like the Spin preset.

Do these animations affect page performance? Animating transform and opacity (which is what every preset here uses) is GPU-accelerated in modern browsers and is the recommended approach for smooth CSS animation — cheaper than animating layout properties like width, top, or margin.

Can I combine multiple presets on one element? Not directly in this tool, but you can list multiple comma-separated animation shorthand values by hand once you have two generated blocks, as long as their @keyframes names don't clash.

Privacy

Everything runs locally in your browser — your settings never leave your device, and no CSS is sent to a server to be generated.