【CodePen】バックグラウンド(背景)アニメーションのアイデア20選

💡 実装のポイント
HTMLにあらかじめ配置した31個の.ani-bubbleに対し、JSでbackgroundColor・サイズ(100〜550px)・left位置・animationDuration(8〜24s)・animationDelayをランダムに割り当てる構成。CSS側の@keyframes bubblemoveはtop: 100% → -600pxと動かすだけのシンプルな内容で、jQueryが50ms間隔で画面外に出た泡を検知しleftを再抽選して再利用している。

💡 実装のポイント
CSSアニメーションではなく<canvas>にvanilla JSで描画するタイプ。Particleクラスが色(colors配列からランダム選択)・半径(1〜8px)・速度(vy = 0.7 × radiusで粒が大きいほど速く落下)を管理し、200個のパーティクルをdraw用(30fps)とupdate用(60fps)の2本のsetIntervalで分離して動かしている。

💡 実装のポイント
タイトル通りJS不要のCSSのみの実装で、多数のドット要素にそれぞれ異なるanimation-delayを与えることでランダムに揺らめいているように見せている。CodePen側のアクセス制限によりソースの詳細な変数名・クラス名までは確認できなかったため、実際にカスタマイズする際は「View Compiled CSS」でキーframesの構成を直接確認することをおすすめする。

💡 実装のポイント
SVGの<linearGradient>要素をベースに、色の変化をアニメーションさせるタイプの背景表現。こちらもCodePen側のアクセス制限によりソースの詳細までは確認できなかったため、色の差し替えなど本格的にカスタマイズする場合は一度Pen上でHTML/CSSを直接開いて構成を確認するのが確実。

💡 実装のポイント
作者は軽量なSVG/Canvasアニメーションを数多く公開しているクリエイティブ系エンジニアで、タイトルの「2kb」が示す通り外部ライブラリなしの極小コードで動作するのが特徴。こちらもCodePen側のアクセス制限で詳細ソースは確認できなかったため、正確な実装方法はPenを直接開いて確認してほしい。

💡 実装のポイント
複数のカラフルな円形要素に強めのfilter: blur()をかけてにじませ、ゆっくり移動させることで柔らかい光の玉のような背景を作るタイプ。こちらもCodePen側のアクセス制限で詳細ソースは確認できなかったため、blurの数値やアニメーション速度を調整したい場合はPenを直接開いて確認してほしい。

💡 実装のポイント
外部ライブラリcss-doodleのカスタム要素<css-doodle>を使った実装。@grid: 2 / 100vw 100vhでグリッドを定義し、css-doodle独自の関数@pn()(ランダム選択)と@stripe()(縞模様生成)を組み合わせてストライプ柄を作成、@keyframes moveでbackground-sizeを1000vmaxから100vmaxへ180秒かけて縮小することで奥から迫ってくるような視覚効果を生んでいる。

💡 実装のポイント
タイトル通りHTML要素は一切使わず、body1要素だけで完結させたSCSS実装。radial-gradient1枚とconic-gradient4枚を重ねてドット柄を作り、SCSSの@eachループでbpx/bpyという2つの@keyframesを生成、複数のbackground-position値を12秒かけて順に切り替えることで規則的な移動を表現している。

💡 実装のポイント
上下2枚のSVG(.top/.bottom)にジグザグ模様の<pattern>を定義し、それぞれ幅をcalc(100% + 160px)(パターンの1周期分プラス)にしておくことで、@keyframes moveTop/moveBottomによるtranslateX移動がループしても継ぎ目が見えない仕組み。JS不要でCSSのみの無限スクロール表現。

💡 実装のポイント
CSS変数--s(サイズ)・--c1/--c2(2色)を使い、複数のconic-gradientをcalc()でずらして重ねることで幾何学模様を生成。HTML要素は不要でhtmlセレクタのみで完結しており、@keyframes mが5段階でbackground-positionを切り替えて模様全体を移動させている。色・サイズの変更はCSS変数を書き換えるだけでよい。

💡 実装のポイント
6列グリッドに並んだ.square要素それぞれに4つの<span>を配置し、太いborderとborder-radius: 50%で扇形を作って風車のような柄にしている。@keyframes rotationで0/25/50/75/100%ごとに90度刻みで回転させ、対になる2つのspanだけanimation-direction: reverseを指定することで交互の動きを表現。

💡 実装のポイント
jQueryで約95個の.drop要素を生成し、それぞれにleft・animation-delay・animation-durationをランダムに設定。各.dropは雫本体の.stem(グラデーションの尾)と着地時の.splat(点線の波紋)を内包しており、drop・stem・splatの3つの@keyframesを同じタイミングで走らせることで「落下→着地→波紋」の一連の動きを再現している。

💡 実装のポイント
Vanilla JSのcreateCircle()が300msごとに.circle要素をランダムな位置へ生成し、@keyframes growでtransform: scale(5)まで広がりながらopacity: 0にフェードアウトする波紋アニメーションを付与。アニメーション完了後はsetTimeoutで要素をDOMから削除しており、要素が無限に増え続けないよう配慮されている。

💡 実装のポイント
Sass記法で書かれており、3本の.lineそれぞれの::after疑似要素に白へのグラデーションを設定、@keyframes dropでtopを-50%から110%まで動かして光が縦に流れる表現を作っている。:nth-child(1)と:nth-child(3)だけmargin-leftとanimation-delayをずらし、3本の光の動きにばらつきを持たせている。

💡 実装のポイント
three.js(r128)を使用し、THREE.Pointsで4000個の星を箱状の空間にランダム配置。星がカメラの手前(z >= 0)を通過したら奥へ再配置し、z座標が0に近づくほどspeed/p[i+2]で移動量が増える仕組みで加速感を演出。半透明の黒いfadePlateメッシュを毎フレーム描画することで、キャンバスをクリアせずに星の軌跡を残すトレイル効果を作っている。

💡 実装のポイント
jQuery + Canvas 2Dで実装。10msごとにballオブジェクトを生成し、消失点(fuite)からの相対位置とzの深度を掛け合わせて疑似的な奥行きを計算するdrawBall()で描画。矢印キー入力でkeyboard.x/yを変化させfuiteをずらすことで、進行方向を操作できるインタラクティブな星空になっている。

💡 実装のポイント
Canvas 2Dで毎フレームrgba(0,0,0,0.05)の半透明な黒をfillRectで重ね塗りすることで文字が徐々にフェードするトレイル効果を作成。固定文字列chineseからランダムに1文字選んで各列にfillTextし、drops[]配列で列ごとのY座標を管理、画面下端を超えたらMath.random() > 0.975の確率でリセットして落下を再開する。

💡 実装のポイント
jQueryプラグインnoisyで#dot.activeにテレビのノイズ風テクスチャを描画しつつ、border-top-width・border-left-widthなど4辺それぞれ異なるtransition-delayを指定することで、クリック時に境界線が順番に広がっていく演出を実現。クリックで.activeクラスをtoggleするだけのシンプルなJS構成。

💡 実装のポイント
.stars・.twinkling・.cloudsの3レイヤーに、それぞれ1000px 1000pxでリピートする外部PNG画像を背景設定し、共通の@keyframes move-background(translate3d移動)を異なる速度(星は70s、雲は150s)で走らせることで奥行きのあるパララックス効果を作っている。画像アセットに依存する実装のため、素材をSVG等に差し替えたい場合は要注意。