About This Tool
Documentation
What does this tool do?
A granular animation timeline editor. Add unlimited percentage keyframe steps (0%, 25%, 50%, 75%, 100%), assign unique CSS property values (transforms, colors, opacity, dimensions) to each step, preview the continuous loop or scrub frames, and copy formatted `@keyframes` stylesheet code, Tailwind V4, or Bootstrap markup.
When should you use it?
Use this tool for complex multi-stage animations such as bouncy notification icons, progressive progress bar pulses, sequential particle float effects, and attention-grabbing badge wobbles.
Key Capabilities & Features
Highlights
Visual timeline keyframe builder with interactive stop selector chips and precise percentage offset sliders
Full transformation controls per frame: Translate, Scale (uniform & independent), Rotate, Skew, Opacity, and Border Radius
Pre-built animation templates library (Bounce, Pulse, Rubber Band, Shake, Flash, Swing, Flip, etc.)
Interactive stage previews for Box, true Circle (50% radius), Sample Text, and Card components
Timeline scrubber with play/pause looping, custom easing, and clean CSS @keyframes, Tailwind V4 & Bootstrap export