Clip Reveal
クリップリベール
どんな動き？
clip-pathで作った矩形の切り抜き範囲がだんだん広がっていき、隠れていた要素が左から右へ現れるように見せるアニメーション。オーバーレイのパネルを使わずCSSのclip-pathだけで実装できるのが特徴で、画像やカードをすっきりと見せたい場面に向いている。
よく使う場所
画像カードヒーローセクション
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Reveal the element by expanding a clip-path rectangle from left to right.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
clip-path: inset(0 100% 0 0) — fully hidden.
Animation:
The clip-path inset shrinks from the right, progressively revealing the element.
Final state:
clip-path: inset(0 0 0 0) — fully visible.
Timing:
duration: 0.9s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSS (clip-path)GSAPIntersection Observer
別名・関連ワード
Clip Path RevealGrow Reveal