Wave
ウェーブ
どんな動き？
SVGで描いた波の形のパスを横方向に少しずつずらしながら無限にループさせ、水面のように揺れ続けているように見せるアニメーション。セクションの境界線を波形にする「波デザイン」の定番演出で、2枚のレイヤーを異なる速度で重ねると奥行きのある海のような表現になる。フッターやヒーローセクションの区切りによく使われる。
よく使う場所
セクション境界フッターヒーローセクション海・水関連のサイト
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Loop a duplicated SVG wave path horizontally so the waveform appears to ripple continuously.Trigger:
Continuous, starts automatically and loops.
Initial state:
translateX: 0
Animation:
A wave-shaped path, duplicated once end-to-end, translates left continuously; a second wave layer moves at a different speed and opacity behind it for depth.
Final state:
translateX: -50% (visually identical to 0, loops seamlessly)
Timing:
duration: 6–9s per layer, easing: linear, iteration: infinite.実装方法の候補
この動きは以下の技術で実装できます。
SVGCSScanvas
別名・関連ワード
SVG WaveWave DividerAnimated Wave