Visually Edit Complex CSS Keyframe Sequences.

Core 100% Features Free forever. No account required.

Sequence animations across multiple elements with a visual timeline. Drag keyframes, adjust timing, see changes instantly.

Paste or build your code in the editor and see your changes instantly. Bring your own designs to perfect your animations.

Export clean @keyframes CSS ready to drop into any project. What you build is what you ship.

Animate opacity, translate, color, blur, and more — each with independent keyframes and easing curves. Add properties by code or by dropdown.

Watch your animation update instantly as you tweak keyframes, easing, and timing. Zero lag, zero refresh.

Everything you need to build CSS animations

All core features are free — no sign-up, no paywall, no limits.

Drag-and-drop keyframes on a professional timeline with snapping, multi-select, and per-property tracks.

Animate multiple HTML elements in a single coordinated animation.

Animate complex CSS like box-shadow, border-radius, and filter with individual sub-property control.

Set custom easing curves on each keyframe with visual curve previews.

Built-in HTML and CSS editors with Emmet support and syntax highlighting.

Start from built-in animation presets and customize to fit your needs.

Coming Soon

Save your custom animations to a personal library. Reuse, remix, and build on your best work.

Coming Soon

Chain multiple saved animations into coordinated sequences with a dedicated sequencer timeline. Orchestrate complex multi-step motion.

Coming Soon

Browse and preview animations directly inside Figma. Copy production-ready CSS without leaving your design tool.