Visually Edit Complex CSS Keyframe Sequences.

Core Features 100% 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.

Drag keyframes, adjust timing, see changes instantly.

Paste or build your code and see changes instantly.

Export clean @keyframes CSS ready to drop into any project.

Each property gets independent keyframes and easing curves.

Watch your animation update instantly. Zero lag, zero refresh.

Everything you need to build stunning CSS animations

If you can dream it, you can animate it.

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.

Export clean @keyframes CSS with scroll triggers, responsive preview, and a built-in code editor with Emmet.

Start from built-in animation presets and shape templates, then customize duration, easing, and timing to make them your own.

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

Bring Sequotion into your design workflow with a dedicated Figma plugin.

Free version also coming soon