ぷかぷか浮遊（フローティング演出）のCSSジェネレーター
要素が空中を漂うような、浮遊アニメーションを生成するツールです。
プレビュー
<div class="floating-box">
<span>Floating Content</span>
</div>.floating-box {
display: inline-block;
padding: 20px 40px;
background-color: #f0f0f0;
border-radius: 12px;
/* 独立した3系統のアニメーションを合成し、自然な漂いを表現 */
animation:
floating-y {{float_duration_y}}s infinite alternate ease-in-out,
floating-x {{float_duration_x}}s infinite alternate ease-in-out,
floating-rotate {{float_duration_r}}s infinite alternate ease-in-out;
}
/* 上下 */
@keyframes floating-y {
0% { translate: 0 {{float_y_neg}}px; }
100% { translate: 0 {{float_y}}px; }
}
/* 左右 */
@keyframes floating-x {
0% { transform: translateX({{float_x_neg}}px); }
100% { transform: translateX({{float_x}}px); }
}
/* 回転 */
@keyframes floating-rotate {
0% { rotate: {{float_rotate_neg}}deg; }
100% { rotate: {{float_rotate}}deg; }
}機能、使い方
- 要素が空中を浮かんでいるようなアニメーションを生成します。
- 上下の動きだけでなく、左右の揺れやわずかな回転を加えることで、多角的な浮遊感を構成できます。
- 独立した3系統のアニメーション周期（秒数）をずらすことで、周期性を抑えた複雑な遷移を実現しています。
- バナー、アイコン、強調したいボタンなどへの適用に適しています。
CSSプロパティの説明
translate、transform、rotateの各独立したアニメーションプロパティを合成し、一つの要素に適用しています。
animationプロパティに複数のkeyframesを指定することで、それぞれの動きが異なるタイミングで重なり合い、不規則な揺らぎを生み出します。
ease-in-outを指定することで、動きの切り替えを滑らかに制御しています。
translateは比較的新しいプロパティで、transformとは独立して位置を制御できるため、複雑なアニメーションの合成に適しています。
