CSS Animation Generator
Layout & Styling
Create beautiful CSS animations with customizable keyframes, timing functions, and iteration settings. Preview animations in real-time and copy the generated code.
Preview
Animation Type
Timing
Timing Function
Behavior
CSS Code
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}animation: fadeIn 1s ease 0s 1 normal none;
8 Animation Types
Choose from fade, slide, scale, rotate, bounce, shake, pulse, and flip animations ready to use.
Full Control
Customize duration, delay, timing function, iteration count, direction, and fill mode for each animation.
Complete CSS Output
Get both keyframes and animation property, or copy the complete CSS with one click.
Animation Properties Explained
| Property | Description | Common Values |
|---|---|---|
| animation-duration | How long the animation takes | 0.3s, 1s, 2s |
| animation-delay | Wait time before starting | 0s, 0.5s, 1s |
| animation-timing-function | Speed curve of animation | ease, ease-in-out, linear |
| animation-iteration-count | Number of times to repeat | 1, 3, infinite |
| animation-direction | Direction of playback | normal, reverse, alternate |
| animation-fill-mode | Styles before/after animation | none, forwards, both |
Timing Functions Guide
Standard Easings
linear- Constant speed throughoutease- Slow start, fast middle, slow endease-in- Starts slow, speeds upease-out- Starts fast, slows downease-in-out- Slow start and end
When to Use Each
- ease-out - Entrances (elements appearing)
- ease-in - Exits (elements disappearing)
- ease-in-out - State changes (hover, toggle)
- linear - Continuous animations (loading spinners)
- cubic-bezier - Custom, branded motion
Animation Best Practices
- 1. Use sparingly
Too many animations can be distracting. Focus on meaningful interactions that guide users.
- 2. Keep it fast
Most UI animations should be 200-500ms. Anything longer feels sluggish.
- 3. Respect motion preferences
Use
prefers-reduced-motionmedia query to disable animations for users who prefer minimal motion. - 4. Prefer transform and opacity
These properties are GPU-accelerated and won't cause layout shifts during animation.