CSS Keyframe Animation Generator
Build CSS @keyframes animations visually — define keyframes, pick easing, and copy production-ready code instantly
Preset Animations
Animation Settings
Keyframes (2)
@keyframes my-animation {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated-element {
animation: my-animation 1s ease-in-out infinite alternate;
}CSS @keyframes Explained
@keyframes Rule | Defines the animation sequence by specifying CSS property values at specific points (percentages) in the animation timeline. Use from / 0% for the start and to / 100% for the end.
animation Property | Attaches a keyframe animation to an element with shorthand including name, duration, easing, delay, iteration count, direction, and fill mode.
Transform Animations | Use transform for performant translate, rotate, scale, and skew effects that are GPU-accelerated. Prefer opacity and transform over animating layout properties.
How to Use
Start with a Preset | Choose from 8 built-in animation presets like Fade In, Bounce, Pulse, Spin, and more to get started quickly. Each preset is fully editable.
Edit Keyframes | Add or remove keyframes and define CSS properties at each percentage point. Type any CSS property name with autocomplete suggestions for common properties.
Live Preview | Watch your animation play in real time in the preview pane. Use Play/Pause and Restart controls to inspect individual frames.
Copy & Use | Click Copy CSS to get the generated @keyframes block and the .animated-element class. Apply it to any element in your project.