登場と退場 · 出てくる・消える
スライドアウト滑出
- 方向がある
- 場所を譲る
- きっぱり
要素が一方向へ滑りながら薄くなり、画面から出ていきます。入ってきた方向と出ていく方向が違うことも多く、右から入って下へ抜ける、それだけで「終わった」という一文になります。
使いどころ
行の削除、バナーの自動消滅、一時パネルが場所を譲るときに使います。移動距離は容器から出る分だけで十分です（-100% で足りるのに -600px と書くと、無為な時間を見せることになります）。
パラメータ
transform: translateY 0→22px · opacity 1→0 · 200ms ease-in
レシピ
スライドアウト → transform: translateY 0→22px · opacity 1→0 · 200ms ease-in
AI に渡す一文
この内容をスライドアウトさせてください。transform を translateY(0) から translateY(22px) へ、同時に opacity を 1 から 0 へ、200ms の ease-in で。動かすのは transform と opacity だけにしてください。height や margin を動かすと下の内容が飛びます。