CSSレンダリングバブルの背景

<DIV CLASS = "ブルース">
	<ULクラス= "バブルbgwall">
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
		<LI>ラブます。</ li>
	</ UL>
</ div>

　　

.bruce {
	背景画像：リニアグラジエント（270deg、＃8146b4、＃6990f6）。
}
.bubble-bgwall {
	オーバーフロー：隠されました;
	位置：相対;
	マージン：0自動;
	幅：1200px;
	高さ：100％;
	{
		表示：フレックス。
		位置：絶対;
		下：-200px;
		正当化 - コンテンツ：センター;
		ALIGN-アイテム：センター;
		国境半径：10pxの;
		幅：は50px;
		高さ：は50px;
		背景色：RGBA（#FFF、0.15）。
		色：#CCC;
		アニメーション：バブル15Sの無限。
		＆：n番目の子（1）{
			左：10％;
		}
		＆：n番目の子（2）{
			左：20％;
			幅：90PX;
			高さ：90PX;
			アニメーション-期間：7S。
			アニメーションの遅延：2S;
		}
		＆：n番目の子（3）{
			左：25％;
			アニメーションの遅延：4S。
		}
		＆：n番目の子（4）{
			左：40％;
			幅：60PX;
			高さ：60PX;
			背景色：RGBA（#FFF、0.3）;
			アニメーション-期間：8S;
		}
		＆：n番目の子（5）{
			左：70％;
		}
		＆：n番目の子（6）{
			左：80％;
			幅：120ピクセル;
			高さ：120ピクセル;
			背景色：RGBA（#FFF、0.2）;
			アニメーションの遅延：3S;
		}
		＆：n番目の子（7）{
			左：32％。
			幅：160ピクセル;
			高さ：160ピクセル;
			アニメーションの遅延：2S;
		}
		＆：n番目の子（8）{
			左：55％;
			幅：40ピクセル;
			高さ：40ピクセル;
			フォントサイズ：12ピクセル;
			アニメーションの継続時間：15秒。
			アニメーションの遅延：4S。
		}
		＆：n番目の子（9）{
			左：25％;
			幅：40ピクセル;
			高さ：40ピクセル;
			背景色：RGBA（#FFF、0.3）;
			フォントサイズ：12ピクセル;
			アニメーション-期間：12S;
			アニメーションの遅延：2S;
		}
		＆：n番目の子（10）{
			左：85％;
			幅：160ピクセル;
			高さ：160ピクセル;
			アニメーションの遅延：5S;
		}
	}
}
@keyframesバブル{
	0％{
		不透明度：0.5;
		変換：移動Y（0）回転（45deg）。
	}
	25％{
		不透明度：0.75;
		変換：移動Y（-400px）回転（90deg）。
	}
	50％{
		不透明度：1;
		変換：移動Y（-600px）回転（135deg）。
	}
	100％{
		不透明度：0;
		変換：移動Y（-1000px）回転（原稿180°）。
	}
}