CSSアニメーションで動く背景に！CSSアニメーションバックグラウンド12選

動的なWEBデザインは今では当たり前。
ただ実装しようと思うとサイトが重くなってしまったり、ゴチャゴチャしたりしてしまいますよね。

そこで今回は軽量かつ、シンプルでオシャレな実用的な動く背景CSSをご紹介します。
ぜひ自身の制作するサイトに組み込んでみてはいかがでしょうか。

ホタルが飛ぶアニメーション背景CSS

See the Pen
CSS Fireflies by Mike Golus (@mikegolus)
on CodePen.

グラデーションの色が変化するアニメーション背景CSS

See the Pen
Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O)
on CodePen.

動く方眼アニメーション背景CSS

See the Pen
Pure css infinite background animation by kootoopas (@kootoopas)
on CodePen.

四角形シンプルアニメーション背景CSS

See the Pen
Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman)
on CodePen.

四角形シンプルアニメーション背景CSS2

See the Pen
Background Animation by Bjorn (@BjornRombaut)
on CodePen.

使い勝手の良い4色シンプルアニメーション背景CSS

See the Pen
Sliding Diagonals Background Effect by Chris Smith (@chris22smith)
on CodePen.

斜め線アニメーション背景CSS

See the Pen
Sépion CSS background animation 2 by Sépion (@Sepion)
on CodePen.

波紋風アニメーション背景CSS

See the Pen
Animated Ripples background by Vaibhav Arora (@vaibhavarora)
on CodePen.

三角形ループアニメーション背景CSS

See the Pen
Infinite SVG Triangle Fusion by Rob DiMarzo (@robdimarzo)
on CodePen.

アニメーションマスクグラデーション背景CSS

See the Pen
Animated CSS mask-image gradient by Chris Neale (@onion2k)
on CodePen.

きらめく星と動く雲のアニメーション背景CSS

See the Pen
pure CSS twinkling stars background by Anastasia Goodwin (@agoodwin)
on CodePen.

流線アニメーション背景CSS

See the Pen
Background Effect by osorina irina (@333397406)
on CodePen.

色が変化する幾何学模様アニメーション背景CSS

See the Pen
Background by Chandan Choudhary (@Cancepto)
on CodePen.

コチラもオススメ

2019年4月17日CSSで簡単に実装できるクールなアニメーションドロワーメニュー10選【上下左右・階層・スライドメニュー・ハンバーガーメニュー】 2018年12月5日CSSで作る！面白い403エラー・404エラーページデザイン集 2019年2月7日【コピペで簡単！】CSSで作る雨や波、水滴など水系のエフェクトアニメーション7選！