Add movement without writing keyframes by hand. Choose an animation, set duration, delay, easing, repeats and direction, watch the preview and copy ready @keyframes and animation CSS.
loading toolHow to make a CSS animation
- Pick a preset or change the settings.
- Watch the live preview.
- Copy the CSS into your stylesheet.
Questions
How do I use the CSS?
Paste it into your stylesheet and add class="animated" to the element you want to move.
Will animations annoy some visitors?
Some people get dizzy from motion. Wrap animations in @media (prefers-reduced-motion: no-preference) so they only play for people who have not turned motion off.
Is my data private?
Yes. Everything happens inside your own browser: nothing you type or choose is uploaded to us or anyone else.
Is it free?
Completely free, with no sign-up, no watermark and no limit on how many times you use it. Light ads keep the site running.
