Animation Builder
Create CSS keyframe animations visually with a live preview.
Free & unlimited
Animation presets
1s∞normal
s
s
Keyframes (3)
0%
25%
50%
75%
100%
%
%
%
Tip: Use fill-mode: both to keep the animation state before and after playing. The playback speed controls let you slow down complex animations for debugging. Try combining transform properties like scale(1.1) rotate(5deg) for compound effects.
@keyframes custom-anim {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
opacity: 0.7;
}
100% {
transform: translateY(0px);
}
}
.element {
animation: custom-anim 1s ease infinite normal none;
}All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Choose animation type
Select from fade, slide, bounce, spin, and more.
- 2
Configure timing
Set duration, delay, easing, and iteration count.
- 3
Define keyframes
Customize the animation keyframes.
- 4
Preview & copy
Watch the animation and copy the CSS code.
- Ease-in-out curves feel the most natural for UI animations.
- 200-300ms is the sweet spot for micro-interactions.
- Avoid animating layout properties (width, height) - use transform instead.
- Use animation-fill-mode: forwards to keep the end state.
- Keyframe editor
- Timing functions
- Duration control
- Live preview
- CSS output
- Create loading animations and spinners.
- Add entrance animations to page elements.
- Build hover effects for interactive elements.