3D ふわふわ浮遊エフェクト
要素がゆっくり 上下に浮きながら少し回転し続ける 、ふわふわとした浮遊エフェクトです。CSS の @keyframes fl3d だけで動き、中間地点で translateY(-24px) と rotate(8deg) を同時にかけ、始点と終点をゼロに戻すことで切れ目のない往復ループを作っています。
解説
要素がゆっくり上下に浮きながら少し回転し続ける、ふわふわとした浮遊エフェクトです。CSS の @keyframes fl3d だけで動き、中間地点で translateY(-24px) と rotate(8deg) を同時にかけ、始点と終点をゼロに戻すことで切れ目のない往復ループを作っています。5s ease-in-out infinite でゆったり無限に繰り返し、大きめの box-shadow が下に落ちることで宙に浮いた立体感を補強しています。
使いどころ
- ヒーローセクションの装飾オブジェクト
- アプリ紹介の浮遊するアイコンやカード
- 空白を埋める動きのあるアクセント図形
浮く高さは translateY(-24px)、回転量は rotate(8deg)、テンポは 5s でそれぞれ調整できます。回転を 0 にすれば素直な上下移動だけになります。box-shadow の落ち具合を浮きと連動させると、より自然な重力感が出ます。あくまで装飾なので、本文や操作要素に被せないこと、そして常時動くため prefers-reduced-motion で停止できるようにしておくと配慮が行き届きます。
使用例・適したシーン
- ヒーロー背景
- セクション装飾
- イラスト的な訴求
よくある質問
上下と回転が同時に動くのはなぜですか
@keyframes の中間地点で translateY と rotate を一つの transform にまとめて指定しているためです。両方が同じ 5 秒のリズムで連動し、ふわっと浮きながら傾く動きになります。
回転をなくして上下だけにできますか
できます。@keyframes 内の rotate(8deg) を削除し translateY だけ残せば、まっすぐ上下に浮く動きになります。落ち着いた印象にしたいときに向いています。