CSS Animation Generator
Design CSS animations from a large preset library with an editable easing curve and export clean @keyframes.
This tool runs entirely in your browser. Your input is never uploaded.
Preview
bk-fade
bk-fade
This preview ignores reduced-motion so you can review the motion you are building.
CSS keyframes
@keyframes bk-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.bk-fade {
animation: bk-fade 1s ease-in-out 0s infinite normal both;
}Add the .bk-fade class to an element - the keyframes and animation shorthand are ready to paste.
Effect
From opacity0
To opacity1
Timing
Duration (s)1s
Delay (s)0s
Loop
Direction
Fill mode
Easing
Preset
Drag a handle or edit the coordinates below.
ease-in-out
CSS Animation Generator
Build CSS animations visually and copy or download ready-to-use @keyframes.
- Pick an animation from a grouped dropdown: six adjustable basics (fade, slide, scale, rotate, bounce, shake) plus about 90 one-shot presets — flash, pulse, rubber band, shakes, swings, back and light-speed entrances, fade/slide/zoom/rotate/roll families, hinge, and more — sourced from the animate.css project (MIT licensed).
- Tune the shared timing (duration, delay, loop, direction, fill mode). The six basic effects also expose their own parameters such as slide distance, start scale, rotate angles, bounce height, or shake amplitude.
- The easing editor draws the timing curve: choose a keyword or Material preset, or drag the two cubic-bezier handles for a fully custom curve.
- A live preview runs the animation as you tweak it. The preview area plays motion even when your system asks for reduced motion, because it exists to review the motion you are building; the rest of the page still respects your preference.
- The export panel shows the generated
@keyframesand a usage class. Copy it, or download it as a.cssfile. Everything runs locally in your browser.