GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

CSS 背景アニメーション 星 9選 — 一行でコピペOK

· Godrich · 9種 · 8分で読める

フィードバックSCSSCSSのみ自動再生ヒーロー

css 背景アニメーション 星のような検索でたどり着く人が本当に探しているのは、雪や星、雨、紙吹雪、泡、蛍、花びら、霧のように小さな粒を画面全体にばらまいて動かす背景の作り方です。

雪が降る01 particle-background-snow-fall 星がまたたく02 particle-background-stars-twinkle SVGの波03 particle-background-wave-svg 雨が降る04 particle-background-rain-lines 紙吹雪05 particle-background-confetti-css 泡が上る06 particle-background-bubbles-rise 蛍07 particle-background-fireflies 桜の花びら08 particle-background-sakura-petals 霧の流れ09 particle-background-fog-drift

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9個は「css 背景アニメーション おしゃれ」のような派手さの順ではなく、粒がどちらへ動くかという基準で並べています。上から下へ落ちるもの(01・04・05・08)、その場で明滅したり横に流れたりするもの(02・03)、下から上へ浮かぶもの(06)、その場を漂うもの(07)、画面全体が往復するもの(09)という順です。コードは粒を何個・どう散らしたかが要点なので、その部分だけを載せていて、完全なファイル一式はzipに入っています。 動く方向よりも反応が基準になるなら、CSS 3Dキューブの傾きでカーソルに応じる軸を先に触れますし、背景全体ではなくボタンひとつを動かせばよい場面では、Tailwindアニメーションの方が近道です。

この9個が使っているのはtransform・opacity・@keyframes・:nth-child()・CSSカスタムプロパティ(var())だけで、どれもBaseline(幅広く利用可能)に達した機能です。唯一09だけが使うfilter: blur()は、caniuseのcss-filtersページによるとベンダー接頭辞なしでChrome 53以降・Safari 9.1以降・Firefox 35以降に対応しています。

01雪が降る

「雪が降る css」の落とし方

円形のspanを24個並べ、画面の外側からtranslateYで静かに落としていく背景です。--iカスタムプロパティはanimation-delayにだけ使い、負の遅延値で24個の位相をばらけさせています。年末プロモーションや冬のイベントページのヒーロー背景に向いています。

雪が降る
新しいタブで開く

01 · 雪が降る — 計測 累積面積 11.553% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

nth-child(n)translateY--i 지연

年末プロモーションの背景に

.p {
  position: absolute; top: -8%; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  animation: fall 6s linear infinite;
  animation-delay: calc(var(--i) * -0.28s);
}
@for $i from 1 through 24 {
  .p:nth-child(#{$i}) { left: #{($i * 53) % 97}%; }
}
@keyframes fall {
  0%   { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(340px); opacity: 0; }
}

02星がまたたく

24個を別々の時計で瞬かせる

「css アニメーション 星」でよく見る形で、小さな点を24個画面全体に散らし、box-shadowの光彩とopacity・scaleを同時に動かして瞬かせています。位置はnth-childで41と67という異なる倍数の剰余を使い、格子状に整列して見えないようにしています。ダークモードのヒーローや夜テーマのイベントページに向いています。

星がまたたく
新しいタブで開く

02 · 星がまたたく — 計測 累積面積 0.894% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

opacity 트윙클nth-child 지연1.5~3s

ダークモードのヒーローに

.p {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  box-shadow: 0 0 10px rgba(23, 20, 26, .55);
  animation: twinkle 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.31s);
}
@keyframes twinkle {
  0%, 100% { transform: scale(.7); opacity: .2; }
  50%      { transform: scale(1.3); opacity: 1; }
}

03SVGの波

つなぎ目が見えない理由

同じ波形の<path>を2枚並べて幅200%のレイヤーを作り、translateXで半分だけ動かすことでつなぎ目のない循環にしています。奥のレイヤーと手前のレイヤーで速度と不透明度を変え、視差で奥行きを出しています。製品紹介セクションの下部区切りや、海・旅行系ランディングの背景に使えます。

SVGの波
新しいタブで開く

03 · SVGの波 — 計測 累積面積 12.781% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

SVG pathtranslateX 루프레이어 시차

区切りと旅行系ランディングに

.layer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; width: 200%; }
.wave { width: 50%; flex: none; }
.layer--back  { animation: drift 6s linear infinite; }
.layer--front { animation: drift 3.9s linear infinite; }
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

04雨が降る

傾けたまま対角線に落とす

細い線を22本並べ、rotate(12deg)で傾けたまま対角線状にtranslateで落下させています。nth-childごとに開始位置と落下時間を少しずつずらし、束になった雨粒のように見せています。梅雨のプロモーションや天気アプリの紹介画面に向いています。

雨が降る
新しいタブで開く

04 · 雨が降る — 計測 累積面積 12.851% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateY 대각선nth-child 속도차0.4~0.7s

梅雨のプロモーションに

.p {
  position: absolute; top: -12%; width: 2px; height: 22px;
  transform: rotate(12deg);
  animation: rain .6s linear infinite;
  animation-delay: calc(var(--i) * -0.07s);
}
@keyframes rain {
  0%   { transform: translateY(0) translateX(0) rotate(12deg); opacity: .7; }
  100% { transform: translateY(380px) translateX(60px) rotate(12deg); opacity: .3; }
}

05紙吹雪

右回りと左回りを半々に

四角いspanを26個落下させながらrotate(var(--spin))で回転させ、2つ目の@forで偶数番目と奇数番目に逆符号を与えて右回りと左回りを半々に分けています。nth-child(3n)で3個ごとに背景色をクリーム系と青系で切り替えています。決済完了や会員登録完了のお祝い画面、当選イベントページに向いています。

紙吹雪
新しいタブで開く

05 · 紙吹雪 — 計測 累積面積 23.881% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotate + translateYnth-child 색상1.8~2.6s

お祝い画面に

.p { position: absolute; top: -10%; width: 7px; height: 11px; }
.p:nth-child(3n) { background: #2f6df6; }
@keyframes confetti {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  100% { transform: translateY(360px) rotate(var(--spin, 360deg)); opacity: .85; }
}

06泡が上る

上がるほど勢いを弱める

枠線だけの円を20個並べ、translateYで画面の下から上へ持ち上げながらscaleを大きく小さく脈打たせています。動きにはcubic-bezier(.2,.8,.2,1)のイージングを使い、上がるほど勢いが弱まるようにしています。飲料・酒類ブランドのヒーローや、ウォーターパーク・スパの紹介背景に使えます。

泡が上る
新しいタブで開く

06 · 泡が上る — 計測 累積面積 12.542% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateY 상승scale 맥동nth-child 크기

飲料ブランドのヒーローに

.p {
  position: absolute; bottom: -10%; width: 10px; height: 10px;
  border: 1.5px solid currentColor; border-radius: 50%;
  animation: rise 4s cubic-bezier(.2, .8, .2, 1) infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  55%  { transform: translateY(-170px) scale(1.15); }
  100% { transform: translateY(-360px) scale(.8); opacity: 0; }
}

07蛍

直線ではない光の軌道

ぼんやり光る点を16個置き、box-shadowの光彩とopacityの明滅に加え、0・20・35・55・70・85・100%の多段キーフレームでtranslateの向きを何度も切り替えています。直線的な軌道ではなく、不規則に方向転換する光の粒として動きます。自然・キャンプ系ブランドの背景や、感性重視のポートフォリオヒーローに向いています。

蛍
新しいタブで開く

07 · 蛍 — 計測 累積面積 1.859% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

opacity 명멸translate 방향전환nth-child 궤적

キャンプ系ブランドの背景に

.p {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 247, 230, .8);
  animation: drift 3.5s ease-in-out infinite;
}
@keyframes drift {
  0%  { transform: translate(0, 0); opacity: 0; }
  35% { transform: translate(14px, -10px); opacity: .9; }
  55% { transform: translate(-8px, -20px); opacity: .3; }
  100% { transform: translate(0, 0); opacity: 0; }
}

08桜の花びら

落下に回転と揺れを重ねる

楕円のspanを18個並べ、30・60・100%のキーフレームで落下・回転・左右の揺れを同時に加えています。パレットにピンクが無いため、色は$subject-blueで代用しています。春のプロモーションや、ウェディング・ビューティー系ブランドのヒーローに使えます。

桜の花びら
新しいタブで開く

08 · 桜の花びら — 計測 累積面積 9.572% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotate + swayanimation-delaynth-child 낙하시간

春のプロモーションに

.p { position: absolute; top: -10%; width: 10px; height: 6px; border-radius: 50%; }
@keyframes petal {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  30%  { transform: translate(18px, 110px) rotate(120deg); }
  60%  { transform: translate(-14px, 240px) rotate(240deg); }
  100% { transform: translate(10px, 380px) rotate(360deg); opacity: .3; }
}

09霧の流れ

位相だけをずらした帯3枚

幅140%・高さ34%のぼやけた帯を3枚重ね、同じlinearのduration(2秒)のままanimation-delayを0・-33%・-66%でずらして位相だけ変えています。translateXの往復とopacityの増減をalternateで行うため、逆再生用のつなぎ目を別に用意する必要がありません。ミステリー系コンテンツのヒーローや、山岳・アウトドアブランドの背景に向いています。

霧の流れ
新しいタブで開く

09 · 霧の流れ — 計測 累積面積 90.962% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateX 왕복opacity 숨쉬기animation-delay 위상

ミステリー系ヒーローに

.p {
  position: absolute; left: -20%; width: 140%; height: 34%;
  filter: blur(6px);
  animation: driftx 2s linear infinite alternate;
}
.p:nth-child(2) { animation-delay: -0.66s; }
.p:nth-child(3) { animation-delay: -1.32s; }
@keyframes driftx {
  from { transform: translateX(-30%); opacity: .18; }
  to   { transform: translateX(30%);  opacity: .42; }
}

どこで壊れるか

同じspanをばらまく型を9回繰り返しただけに見えますが、実際に組んでみると3か所でつまずきました。

translateの%は要素自身が基準

1つ目は、transform: translate()の%が舞台ではなく要素自身の大きさを基準に計算されるという点です。雪・雨・紙吹雪・泡・桜の花びらの5つを最初translateY(370%)のように書いたところ、実際には6〜22pxしか動かず、01の累積面積は0.15%にとどまりました。px値に置き換えてから、ようやく画面を実際に横切るようになりました。

ぼかしが強いと動いて見えない

2つ目は、blurを強くかけすぎるとフレーム間で変わるピクセルの割合が測定のしきい値を下回ることです。09を最初blur(16px)とopacityだけで作ったとき、累積面積は94%あるのに強度と動いたフレーム数はどちらも0でした。1/12秒ごとの変化があまりに細かく刻まれ、しきい値(12)を超えられなかったためです。ぼかしを弱め、移動距離を広げてから直りました。

撮影区間より長いdurationの罠

3つ目は、ease-in-outのような緩急のあるイージングに、撮影区間(2.0秒)よりずっと長いdurationを組み合わせることです。曲線のゆるやかな立ち上がり部分しか撮れず、ほぼ静止して見えてしまいます。09を10秒にしたとき実測は0で、durationを撮影区間の約数に近づけてから流れが正しく見えるようになりました。この3つをすでに直した9本のファイルをまとめたzipを開くパスワードはfjv3dy5xです。

この霧の帯(09)で実際に引っかかった「撮影区間より長いループ」の罠は、大きな面積が往復する図ほど踏みやすくなります。メンフィスデザインのLPパーツの波のセクションも、往復が撮影区間を超えると同じ理由で静止フレームとして測定されます。

アクセシビリティ

動きを消しても粒は残す

OSの「視差効果を減らす」設定を有効にしている人には、9個すべてにprefers-reduced-motion: reduceのブロックがかかります。01・04・05・08は落下や回転を止めて薄いopacityの粒だけを残し、02・07は明滅と移動を止めて固定のopacityだけを残し、03・09は流れ自体を止めて静止した帯を見せ、06は上昇を止めてbottom: 20%の位置に固定します。動きは消しても粒がそこにあるという事実だけは残す作りです。

@media (prefers-reduced-motion: reduce) {
  .p { animation: none; opacity: .35; top: 40%; }   // 01 雪
  .p { animation: none; opacity: .55; }              // 02 星
  .layer { animation: none; }                        // 03 波
  .p { animation: none; opacity: .4; bottom: 20%; }  // 06 泡
}

次に読む

prefers-reduced-motionのブラウザ対応表はMDNのドキュメントにまとまっています。背景・粒以外のCSSアニメーションを探しているならCSSカテゴリー一覧を、このサイトが初めてなら紹介ページを先にご覧ください。

FAQ

「パーティクル アニメーション css」の粒はいくつまで散らしていいですか？

この記事は項目ごとに3〜26個を使っています。40個を超えるとtransform・opacityだけでも合成すべきレイヤーが増え、非力な端末でカクつくことがあります。背景用途なら20〜30個ほどで十分に密に見え、それ以上増やしても見た目の違いはあまり大きくありません。

JavaScriptなしで粒ごとに速度を変える仕組みは何ですか？

SCSSの@forでnth-childごとに異なる倍数の剰余を計算し、位置・大きさ・持続時間を固定値として埋め込んでいます。--iカスタムプロパティはanimation-delayにだけ使い、同じキーフレームを粒ごとに違う時点から始めさせています。どちらもコンパイル・レンダリングの時点で終わる計算なので、実行時のJavaScriptは要りません。 コンパイル時に散らし方を固定するこの発想は、シード値ひとつで同じ模様を引き直すCSS背景パターン9種でもそのまま使われています。

桜の花びらが青いのはなぜですか？

このサイトのデモ配色にピンクが無いため、$subject-blueで代用しています。zipを開けばSCSS変数$colorを1つ書き換えるだけで、好きな色にすぐ変更できます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。