MotionLang

登場と退場 · 出てくる・消える

スライドイン滑入

要素が画面外や片側から定位置へ滑り込みます。移動量はふつう 8〜24px で、フェードを併せると自然になります。

ツールでこの項目を開く

使いどころ

どこから来たかを示したいときに使います(左から入るサイドパネルなど)。ただ現れればよい場合は「フェードイン」のほうが控えめです。

パラメータ

240ms · cubic-bezier(0.22, 1, 0.36, 1) · transform: translateX 24px→0 + opacity 0→1

レシピ

  1. スライドイン → translateX 24px → 0 @ 240ms cubic-bezier(0.22, 1, 0.36, 1)
  2. スライドイン → opacity 0 → 1 @ 240ms

AI に渡す一文

このサイドパネルの登場を実装してください。左から 24px ずれた位置から定位置へスライドし、同時に透明度を 0→1 に、240ms、cubic-bezier(0.22, 1, 0.36, 1) で。

同じカテゴリの動き