Make it bounce讓方塊彈一下

Pick a motion and see the same block slide, grow and fade in選一種動作，看看同一個方塊如何滑動、放大與淡入

Choose a feel and press play

Slide

Grow

Fade

Timeline

Continuous playback is disabled by your reduced-motion preference, scrub the timeline to inspect any frame

Advanced settings & export

01 / CURVEcubic-bezier(0.25, 0.1, 0.25, 1)

Y: output progressX: elapsed time

Drag a control point or use arrow keys when focused, Shift for larger steps, Esc to cancel a drag, scroll outside the canvas on touchscreens

02 / PARAMETERS

0 msOutput 0.000

The preview solves the Bézier time coordinate before evaluating its output, matching the CSS timing function

04 / CSS

.motion-demo {
  --travel: 240px;
  animation: move 1200ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--travel)); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-demo {
    animation: none;
    transform: translateX(var(--travel));
  }
}

Apply .motion-demo to an element and adjust --travel to set the distance, the snippet includes reduced-motion handling

Enable JavaScript to play. You can still read how it works below.啟用 JavaScript 即可操作實驗，下方的製作說明仍可直接閱讀

How it works看看怎麼做的

Motion studio動畫曲線編輯器

Cubic Bézier
Pointer capture
CSS export

Solve time before output先反解時間，再計算輸出

CSS time maps to the Bézier x coordinate. Newton iteration with a bounded bisection fallback solves the parameter before evaluating y, using the same controls as the exported timing function.CSS 的時間進度對應 Bézier 的 x 座標，先用 Newton 法配合區間二分反解參數，再計算 y，預覽與匯出的 timing-function 使用同一組控制點

Precise controls and validation精準操作與邊界回饋

Drag handles, nudge with arrow keys or Shift, and cancel a drag with Escape. X stays within 0–1 while y allows anticipation and overshoot. Invalid input preserves the last valid settings.控制點支援拖曳、方向鍵與 Shift 微調，Esc 還原拖曳，x 限制在 0–1，y 可提前或超越，輸入無效時保留上次有效設定

Take the curve into your project把曲線帶回專案

Export duration, easing, translation keyframes and reduced-motion handling as CSS. Playback pauses offscreen or in hidden tabs; the timeline remains available for frame inspection.匯出包含長度、曲線、位移關鍵影格與減少動態處理的 CSS，預覽離屏或分頁隱藏即暫停，也能用時間軸逐格核對