登場と退場 · 出てくる・消える
スライドイン滑入
- 方向がある
- 軽快
- 明快
要素が画面外や片側から定位置へ滑り込みます。移動量はふつう 8〜24px で、フェードを併せると自然になります。
使いどころ
どこから来たかを示したいときに使います(左から入るサイドパネルなど)。ただ現れればよい場合は「フェードイン」のほうが控えめです。
パラメータ
240ms · cubic-bezier(0.22, 1, 0.36, 1) · transform: translateX 24px→0 + opacity 0→1
レシピ
スライドイン → translateX 24px → 0 @ 240ms cubic-bezier(0.22, 1, 0.36, 1)スライドイン → opacity 0 → 1 @ 240ms
AI に渡す一文
このサイドパネルの登場を実装してください。左から 24px ずれた位置から定位置へスライドし、同時に透明度を 0→1 に、240ms、cubic-bezier(0.22, 1, 0.36, 1) で。