CSS Animation Keyframe Builder
Build CSS @keyframes animations visually. Add keyframe stops, set property values, preview in real time, and export ready-to-use CSS.
Live Preview
animation shorthand
animation: myAnimation 0.6s ease-out infinite normal both;Keyframe Stops (2)
Generated CSS
@keyframes myAnimation {
0% {
opacity: 0;
transform: translateY(16px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.element {
animation: myAnimation 0.6s ease-out infinite normal both;
}About the CSS Animation Keyframe Builder
CSS @keyframes animations can be tedious to write by hand — you need to remember the right property names, juggle percentage stops, and mentally simulate what the animation looks like. This tool lets you build animations interactively: add stops, set property values, and watch the preview update in real time.
Animation Settings
| Property | What it controls |
|---|---|
| duration | How long one cycle takes in seconds |
| timing-function | The easing curve — ease-out for natural motion, linear for constant speed |
| iteration-count | How many times the animation plays (infinite for looping) |
| direction | normal plays 0→100%; alternate bounces 0→100→0% |
| fill-mode | both is usually what you want — persists the end state |
Commonly Animated Properties
transform translateX/Y, rotate, scale, skew — GPU-accelerated
opacity Fade in/out — also GPU-accelerated
background-color Color transitions
border-radius Morph between shapes
filter blur(), brightness(), drop-shadow()
clip-path Animate shapes (use our Clip Path tool)
Performance tip
For smooth 60fps animations, stick to transform and opacity. These run on the compositor thread and don't trigger layout or paint. Animating width, height, or margin forces the browser to recalculate layout on every frame.
Pro Tip: combine with clip-path
Animating clip-path between two polygon shapes with the same point count creates striking reveal effects. Use the Clip Path Generator to build your shapes, then paste the values as keyframe property values here.