CSS Animation Generator
Create CSS keyframe animations with presets and visual preview.
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
animation: bounce 1s ease 0s infinite normal none;How to Use the CSS Animation Generator
Choose a preset animation from the grid — bounce, fade, slide, spin, pulse, shake, flip or zoom. Adjust the duration, delay, timing function, iteration count, direction and fill mode using the controls. The preview element animates live so you can see exactly how your animation looks. Click "Copy CSS" to grab the keyframes and animation property for your stylesheet.
Frequently Asked Questions
What are CSS keyframe animations?
CSS keyframe animations let you define a sequence of styles at various points during an animation. The browser smoothly transitions between keyframes, creating motion effects without JavaScript.
What does animation-fill-mode do?
Fill mode controls what styles apply before and after the animation runs. "forwards" keeps the final state, "backwards" applies the first keyframe during the delay, and "both" combines the two.
What is the difference between ease and linear?
Linear moves at a constant speed. Ease starts slow, speeds up, then slows down at the end, producing a more natural feel. Ease-in and ease-out only accelerate or decelerate, respectively.
Can I combine multiple animations?
Yes — CSS lets you comma-separate multiple animation values on a single element. Generate each animation here and combine them in your stylesheet.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →