Skip to content
FR

CSS animation generator

Create a CSS animation live: 15 effects (fade, slide, bounce, pulse…), duration, delay, easing, iterations. Ready-to-copy @keyframes code.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Bring your interfaces to life without a library: 15 ready CSS animations (fade, slides, zoom, bounce, pulse, shake, spin, flip…) with adjustable duration, delay, timing curve, iterations, direction and fill mode. The @keyframes code is ready to copy, including a version that respects reduced motion.

When to use it

Content entrance

A 0.5 s slide-up on a page's cards makes loading feel smoother.

Drawing attention

A subtle pulse on a button or a shake on an invalid field guides the eye without extra text.

Loading indicators

An infinite linear spin makes a loading spinner in a few lines.

How to use

  1. Pick an animation effect.
  2. Set the duration, delay, easing and iterations.
  3. Copy the @keyframes code and the animation rule.

How it works

Each effect is a sequence of @keyframes steps using only transform and opacity, the two smoothest properties to animate. The preview injects these steps under its own name so it never clashes with the site's animations.

The animation property is written in shorthand: name, duration, curve, then delay, iterations, direction and fill mode only when they differ from the defaults.

Tips for best results

  • 200 to 500 ms for interface animations: longer feels slow.
  • ease-out suits entrances, ease-in suits exits.
  • Avoid infinite animations on text people need to read: they are tiring.
  • Offset each card's delay slightly for a cascading effect.

Common problems and fixes

The element jumps back at the end

Add animation-fill-mode: forwards (or both) to keep the final state.

The element shows then disappears during the delay

With a delay, use both so the start state (hidden) applies immediately.

The animation doesn't replay

A CSS animation plays once per render. To restart it, remove and re-add the class with JavaScript.

Frequently asked questions

What is @keyframes?

A CSS rule describing the steps of an animation (from 0% to 100%). The animation property applies it to an element with a duration, an easing curve and an iteration count.

What is animation-fill-mode for?

It sets what to show before and after the animation. “both” keeps the start state during the delay and the end state afterwards: essential for entrance effects.

Are CSS animations fast?

Yes, especially those using only transform and opacity, like every effect here: the browser computes them on the graphics card.

How do I respect people sensitive to motion?

The “With reduced motion” tab adds a prefers-reduced-motion rule that turns the animation off when the user asked for it in their system settings.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.