Slide In
スライドイン
どんな動き？
透明度を変えずに、画面の外側から要素そのものが横方向へ移動してくるアニメーション。フェードを伴わないぶんキビキビとした印象になり、スピード感を出したいUIやカードの登場、モバイルメニューの表示など、はっきりした動きを見せたい場面で使われる。
よく使う場所
モバイルメニューカード通知サイドパネル
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Slide the element in from outside the viewport without fading.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
opacity: 1
translateX: -120%
Animation:
Move into place at full speed; opacity stays at 1 throughout.
Final state:
translateX: 0
Timing:
duration: 0.6s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSIntersection ObserverGSAP
別名・関連ワード
Slide InTranslate In