マスクリビール（画像が左から現れる）
画像（ここではサンプルとしてアイコン入りのブロック）が、まるでマスクをめくるように左から右へ徐々に姿を現すリビールアニメです。仕掛けは clip-path の polygon で、最初は幅ゼロの状態から @keyframes で右辺を 100% まで広げています。
解説
画像（ここではサンプルとしてアイコン入りのブロック）が、まるでマスクをめくるように左から右へ徐々に姿を現すリビールアニメです。仕掛けは clip-path の polygon で、最初は幅ゼロの状態から @keyframes で右辺を 100% まで広げています。cubic-bezier のイージングで滑り出しと止まりに緩急がつき、上質な登場感になります。CSS だけで完結し JavaScript は不要です。
使う場面の例
- ヒーローのキービジュアルが読み込み後に映える形で現れる演出
- 実績・ギャラリーの写真を順に登場させるスクロール演出の一部
- ブランドの世界観を丁寧に見せたい LP の冒頭
現れる向きは polygon の座標を入れ替えれば右からや上からにも変更できます。速さやタイミングはアニメーションの時間と delay で調整します。実際のサイトでは animation をスクロール検知（IntersectionObserver）で発火させると、表示領域に入った瞬間に再生できて効果的です。動きを抑えたい場合は prefers-reduced-motion で即時表示に切り替えましょう。
使用例・適したシーン
- スクロール演出
- ヒーロー画像登場
- ストーリーテリング型 LP
よくある質問
現れる方向を右からに変えられますか？
可能です。clip-path の polygon の座標が画像の表示範囲を表すので、開始と終了の頂点の並びを入れ替えると右からや上下方向にもめくれます。border-radius のような視覚調整は不要です。
実際の写真でも同じように動きますか？
動きます。背景のグラデーション部分を img 要素や背景画像に置き換えれば、写真がそのままマスクで現れます。clip-path は中身の種類を問わず効くためです。