Motion / devs tools
CSS Transition and Easing Simulator
Compare more than 36 easings with cubic-bezier controls, duration, delay, playback, reverse, speed, and scrubbing.
Opening the editor…
What it covers
Build with confidence, not guesswork
The editor keeps visual settings, states, responsive overrides, implementation notes, and checks in one portable project.
- More than 36 easings
- Cubic-bezier editor
- Play, reverse, and scrub
- Multi-element delays
Output
HTML · CSS · JavaScript
Glossary
Plain-language explanations
- Preview（プレビュー）
- A live rendering of the current settings.
- State（ステート）
- A condition such as hover, keyboard focus, active, or disabled.
- Responsive（レスポンシブ）
- Layout and styling that adapt to screen or container size.
- Reduced motion（動きを減らす設定）
- An operating-system preference that asks websites to reduce non-essential animation.