CSS Animation

CSS Animated Gradient Background

CSSだけで背景をゆっくり動かすグラデーションアニメーションを試す

CSS Animated Gradient Background

Webで見つけた、CSSだけで動くグラデーション背景の実験。

JavaScriptを使わず、linear-gradient と background-position、CSS Animationだけで背景をゆっくり動かす。

Reference

WebDesignFactsで紹介されていたCodePenの実装をベースに検証。

CSSだけで背景のグラデーションをゆっくり動かす、シンプルだけど視覚的な効果。

My Experiment

CodePenの実装を参考に、or-d.com用のデモとして組み直した。

CSS Animated Gradient

Pure CSS / No JavaScript

Original

  • WebDesignFacts — CSSアニメーションで動く背景に！CSSアニメーションバックグラウンド12選
  • CodePen — Pure CSS Animated Gradient Background