GODRICH

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

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

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

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

01 particle-background-snow-fall 02 particle-background-stars-twinkle 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個は派手さの順ではなく、粒がどちらへ動くかという基準で並べています。上から下へ落ちるもの(01・04・05・08)、その場で明滅したり横に流れたりするもの(02・03)、下から上へ浮かぶもの(06)、その場を漂うもの(07)、画面全体が往復するもの(09)という順です。コードは粒を何個・どう散らしたかが要点なので、その部分だけを載せていて、完全なファイル一式はzipに入っています。

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

01雪が降る

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

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個画面全体に散らし、box-shadowの光彩とopacity・scaleを同時に動かして瞬かせています。位置はnth-childで41と67という異なる倍数の剰余を使い、格子状に整列して見えないようにしています。ダークモードのヒーローや夜テーマのイベントページに向いています。

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 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ごとに開始位置と落下時間を少しずつずらし、束になった雨粒のように見せています。梅雨のプロモーションや天気アプリの紹介画面に向いています。

translate 대각선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個ごとに背景色をクリーム系と青系で切り替えています。決済完了や会員登録完了のお祝い画面、当選イベントページに向いています。

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)のイージングを使い、上がるほど勢いが弱まるようにしています。飲料・酒類ブランドのヒーローや、ウォーターパーク・スパの紹介背景に使えます。

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の向きを何度も切り替えています。直線的な軌道ではなく、不規則に方向転換する光の粒として動きます。自然・キャンプ系ブランドの背景や、感性重視のポートフォリオヒーローに向いています。

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で代用しています。春のプロモーションや、ウェディング・ビューティー系ブランドのヒーローに使えます。

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霧の流れ

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

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か所でつまずきました。

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

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

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

アクセシビリティ

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

粒はいくつまで散らしていいですか？

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

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

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

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

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

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

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