← All text tools

CSS animation generator

Bounce, fade, shake, slide and more as @keyframes, ready to copy.

  • Free
  • No sign-up
  • Works on any device

About CSS animation generator

Choose a ready-made effect such as bounce, fade, shake, pulse or slide, adjust duration and delay, and copy the @keyframes rule with the animation property. Stick to transform and opacity where possible, because browsers animate those smoothly without recalculating the page layout.

How to use CSS animation generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

How do I make a CSS animation loop forever?

Set animation-iteration-count to infinite, or use infinite in the animation shorthand. Add a timing function such as ease-in-out so the loop feels natural.

Is CSS animation generator free?

Yes. CSS animation generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools