100% Free · No Login · Instant Preview
Build CSS Animations
Visually & Instantly
Add keyframe stops, tweak opacity, transforms, and colors. Preview your @keyframes animation live, then copy the production-ready CSS in one click.
🎬
Visual Keyframe Editor
Add stops at any percentage. Set opacity, translate, scale, and rotate values per keyframe — no memorising syntax.
▶️
Live In-Browser Preview
See your animation play instantly as you edit. Adjust duration, easing, iterations, and direction in real-time.
📋
Copy Production CSS
Get clean @keyframes + animation shorthand CSS. Paste directly into your stylesheet — zero cleanup needed.
Quick Presets
Animation Settings
Keyframes (2 stops)
0%
px
px
°
#a855f7
100%
px
px
°
#ec4899
Live Preview
Edit any value to see changes instantly
Generated CSS
@keyframes myAnimation {
0% {
opacity: 0;
background-color: #a855f7;
}
100% {
opacity: 1;
background-color: #ec4899;
}
}
.element {
animation: myAnimation 1s ease 0s infinite normal none;
}Frequently Asked Questions
Everything you need to know about CSS Keyframe Animation Builder.