CSS Animation Generator
Generate CSS keyframe animations visually. Control timing, easing, iteration, and direction with live preview.
How to Use
- Choose an animation type from the preset library — fade in/out, slide, scale, rotate, bounce, shake, pulse, or create a custom keyframe sequence. The preview animates immediately so you can see the effect.
- Customize the animation parameters: duration (how long one cycle takes), timing function (ease, ease-in, ease-out, linear, or custom cubic-bezier), delay before starting, iteration count (specific number or `infinite`), and direction (normal, reverse, alternate, alternate-reverse).
- Pick the animation fill mode: `none` (default behavior), `forwards` (retain the last keyframe's state), `backwards` (apply the first keyframe's state during the delay), or `both` (both backwards and forwards). Copy the complete CSS including the `keyframes` rule and the `animation` shorthand declaration.
Frequently Asked Questions
- What's the difference between ease, ease-in, and ease-out?
- `ease` (default) starts slowly, speeds up in the middle, and slows at the end — it feels natural. `ease-in` starts slowly and accelerates (good for elements entering the screen). `ease-out` starts fast and decelerates (good for elements exiting). `linear` maintains constant speed. For full control, use `cubic-bezier()` to define your own acceleration curve.
- How do I make an animation loop infinitely?
- Set `animation-iteration-count` to `infinite`. Combine this with `animation-direction: alternate` to have the animation play forward then backward in a smooth ping-pong loop — perfect for pulsing effects, breathing animations, and loading spinners.
- Are CSS animations performance-friendly?
- Yes, when using the right properties. Animating `transform` (translate, scale, rotate) and `opacity` is GPU-accelerated and runs on the compositor thread — avoiding layout recalculations. Avoid animating `width`, `height`, `top`, `left`, or `margin` as these trigger expensive layout reflows. The generator's presets prioritize compositor-only properties.