Converter Web ToolsConverter WebTools

CSS Animation Generator (@keyframes)

Create a CSS Animation in your browser, free and instantly.

Effect Duration Timing Repeat

About CSS keyframe animations

The CSS Animation Generator creates keyframe animations you can drop straight into your site. Choose an effect — fade, slide, bounce, spin, pulse, shake or flip — set the duration, timing function and repeat count, preview it live, and copy both the @keyframes rule and the animation shorthand. It runs entirely in your browser.

How CSS Animation works

How to generate an animation

  1. Pick an effect and watch it play in the preview.
  2. Set the duration, easing (timing function) and how many times it repeats.
  3. Copy the animation shorthand and the matching @keyframes into your CSS.

Animation vs transition

A CSS animation uses @keyframes to define stages and can loop on its own; a transition animates a single change between two states (often on hover). This tool produces keyframe animations for richer, repeatable motion.

Performance tip

Animating transform and opacity (as these effects do) is GPU-accelerated and smooth. Avoid animating layout properties like width or top for the best performance.

Common uses

  • Add entrance animations (fade, slide)
  • Create attention effects (pulse, shake)
  • Build a spinning or flipping element
  • Animate icons and badges
  • Prototype motion quickly
  • Learn @keyframes syntax
  • Loop a subtle background animation
  • Copy ready-made animation CSS

Frequently asked questions

How do I create a CSS animation?
Pick an effect and settings; the tool gives you the @keyframes rule and the animation shorthand to copy.
What is the difference between animation and transition?
Animations use keyframes and can loop; transitions animate one change between two states.
How do I make it loop forever?
Set the repeat option to infinite.
Which properties are smooth to animate?
transform and opacity are GPU-accelerated and perform best.
Can I change the easing?
Yes — choose a timing function like ease, linear or ease-in-out.
Is anything uploaded?
No — it runs entirely in your browser.
Does it work in all browsers?
Yes — CSS animations are widely supported.
Is it free?
Yes — completely free with no sign-up.