MotionLang

状態間のトランジション · A から B へ

モーフ形变

同じものが形・大きさ・角丸を変えながら連続的に別の姿へ変わります。途中もずっと同一の要素です。

ツールでこの項目を開く

使いどころ

要素の正体はそのままで形だけが変わる場合(ボタンが入力欄になるなど)に使います。中身が入れ替わる場合は「クロスフェード」を使います。

パラメータ

300ms · ease-in-out · border-radius: 8px→24px + size animates in sync

レシピ

  1. モーフ → border-radius 8px → 24px @ 300ms ease-in-out

AI に渡す一文

このボタンをクリック後に入力欄へモーフさせてください。幅・高さ・border-radius を 8px から 24px へ 300ms の ease-in-out で変化させ、同じ要素を破棄しないようにします。

同じカテゴリの動き