Motion DevTools

Inspect, edit, export.

Create web animations faster than ever with the Chrome extension for CSS and Motion One.

Play

Inspect

Press record and interact. Detected CSS and Motion One animations will be plotted on a classic timeline interface.

Use the playback controls to scrub and replay your animation from any point.

Find out more

Edit

Add, move and remove keyframes.

Edit values and easing with custom controls, and your edits will be reflected on the page in real-time.

Find out more

Export Beta

Once you've perfected your animation, hit the export button to instantly generate code.

Export any animation into CSS transitions, CSS animations or Motion One.

Find out more