Floating
フローティング
どんな動き？
要素がゆったりとしたイージングで上下にわずかに揺れ続けるループアニメーション。水面に浮かぶもののような軽やかで有機的な印象を与える。アイコンやイラスト、装飾的なオブジェクトに適用して、ページに柔らかい生命感を持たせたいときに使われる。
よく使う場所
アイコンイラスト装飾オブジェクト
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Gently move an element up and down in a slow, continuous loop.Trigger:
Load (starts automatically and loops continuously).
Initial state:
translateY: 0
Animation:
The element eases smoothly upward, then back down past its origin and up again, in a slow continuous oscillation.
Final state:
translateY: 0 (loops back to start)
Timing:
duration: 3–4s, easing: ease-in-out, iteration-count: infinite, direction: alternate.実装方法の候補
この動きは以下の技術で実装できます。
CSS animation (infinite, ease-in-out)
別名・関連ワード
Float LoopBobbing AnimationHover Float