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.