状態間のトランジション · A から B へ
モーフ形变
- 連続的
- 巧み
- 一体
同じものが形・大きさ・角丸を変えながら連続的に別の姿へ変わります。途中もずっと同一の要素です。
使いどころ
要素の正体はそのままで形だけが変わる場合(ボタンが入力欄になるなど)に使います。中身が入れ替わる場合は「クロスフェード」を使います。
パラメータ
300ms · ease-in-out · border-radius: 8px→24px + size animates in sync
レシピ
モーフ → border-radius 8px → 24px @ 300ms ease-in-out
AI に渡す一文
このボタンをクリック後に入力欄へモーフさせてください。幅・高さ・border-radius を 8px から 24px へ 300ms の ease-in-out で変化させ、同じ要素を破棄しないようにします。