CSS Animation Generator
Generate CSS keyframe animations: spin, pulse, bounce, float, shake, fade, slide, swing, flip and ping. Control duration, delay, easing and iterations.
Timing Function
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
.animated {
animation: bounce 1.2s ease-in-out 0s infinite both;
}About the css animation generator
A CSS animation is a named set of keyframes plus a shorthand describing how to play it: duration, easing, delay, iteration count and fill mode. The ten animations here cover the cases that come up constantly, from a spinner to an attention shake on a failed form field.
The exported CSS includes both the keyframes block and the animation shorthand, so it works as a straight paste with nothing missing.
How to use it
- 1Pick an animation and press Replay to watch it from the start.
- 2Set the duration. Under 300 milliseconds reads as instant, over two seconds feels slow.
- 3Add a delay if it should wait, for example when staggering a list.
- 4Choose an easing. ease-in-out suits most movement.
- 5Set it to loop, or give it a fixed number of iterations.
- 6Copy the CSS.
Worth knowing
- animation-fill-mode: both keeps the element at its final frame instead of snapping back.
- Wrap decorative animation in a prefers-reduced-motion query so it can be turned off.
Questions
Why does my element jump back after the animation?
Without animation-fill-mode the element returns to its original state. Use both, or forwards, to hold the final keyframe. The exported CSS includes it.
Should I use CSS animation or a library?
For a single element with a defined sequence, CSS is smaller and faster. Reach for a library when you need orchestration across many elements, or physics-based motion.
How do I respect users who prefer less motion?
Wrap the animation in @media (prefers-reduced-motion: no-preference), so it only runs for people who have not asked to reduce it.