MotionLang

移動と変形 · 動かす・回す・拡大縮小

移動(トランスレート)位移

要素を X・Y・Z 軸に沿ってまとめて動かします。形は変わらず、位置だけが変わります。

ツールでこの項目を開く

使いどころ

形を保ったまま A から B へ動かしたいときに使います。top や left で動かすとページが重くなるので避けてください。

パラメータ

transform: translateY(-8px) · 200ms · ease-out

レシピ

  1. 移動(トランスレート) → 200ms ease-out
  2. 移動(トランスレート) → transform: translateY(-8px)

AI に渡す一文

このカードの浮き上がりを transform: translateY(-8px)、200ms、ease-out に変更してください。top や margin は動かさないでください。

同じカテゴリの動き