CSSで描くパーティクルアニメーション

この記事は CSS Advent Calendar 2019 22日目の記事です。
CSSでこんなこともできるんだなぁぐらいの軽い気持ちでみていただけますと幸いです。

パーティクルアニメーションとは

パーティクルとは粒子のことで、粒子に対して色々な動きや変化を与えることで、 神秘的な演出や派手な演出・キュートな演出など様々な表現ができます。

CSSで描いてみた

以下、制作したパーティクルアニメーションのサンプルとなります。

※Qita上では動作が重いので、サンプル右上のCodePenロゴかDEMOをクリックしてご覧ください。
※SPではあまり綺麗に映りません…

● DEMO

See the Pen Particle Rotation #02 by Hisami Kurita (@hisamikurita) on CodePen.

解説

サンプルはCSSアニメーションを使用して動かしています。
以下、ポイントとなる技術的な部分を解説していきたいと思います。

Pug + SCSS

メタ言語のPugとSCSSを使用しています。
主にfor文でdivを100~生成したり、div一つ一つに固有のスタイルを当てるために使用します。

Pug

- for (var i = 0; i < 200; i++)
    div.rotate
      div.flip_rotate
        div.flip_pos
          div.flip

コンパイルします↓

HTML

<div class="rotate">
  <div class="flip_rotate">
    <div class="flip_pos">
        <div class="flip"></div>
    </div>
  </div>
</div>
<!-- 上記の複数のdivが200個生成されます。 -->

SCSS

@for $i from 1 through 200 {
  .rotate:nth-of-type(#{$i}) {
  }
}

コンパイルします↓

CSS

.rotate:nth-of-type(1) {
}
.rotate:nth-of-type(2) {
}
.rotate:nth-of-type(3) {
}
/* 上記のクラス指定を200番目まで固有に指定することができます。 */

メタ言語を使用しないで、HTMLとCSSのみでも書くことも可能ですが、流石に100~固有にスタイルを当てていくのは大変だと思います

ランダム関数

パーティクルアニメーションはランダムな値を与えたい時が多いです。
例えば、この要素は速く動かしたいけど別の要素はゆっくり動かしたいことがよくあります。
その時にrandom()を使用します。

SCSS

animation: rotation linear infinite reverse;
animation-duration: random(50000) + 20000 + ms;

サンプルでは円周上を回転させる際のCSSアニメーションにかかる時間の秒数に対して、
上記のように引数50000の中でランダムな値が出るように設定しています。
更に、20000を足すことで、20001ms~70000msの範囲でランダムな値が出るように設定しています。このように設定することで極端に遅いアニメーションをさせないようにしています。

animation-delayに負の値を指定する

animation-delayは負の値を指定することで、アニメーション周期の指定した時間から直ちに開始されます。

SCSS

animation: rotation linear infinite reverse;
animation-delay: random(9999) + 50000 * -1ms;

サンプルでは円周上を回転させる際のCSSアニメーションの開始時間に対して、
上記のように負の値を設定しています。
更に、ランダム関数を使用することで-40001ms~-49999msの範囲でランダムな値が出るように設定しています。animation-durationは20001ms~70000msの範囲で設定しているのでアニメーションの経過時間が収束するようになっています。

まとめ

主な技術的ポイントは以上になります。
何か、誤っている点がございましたらご指摘いただけますと幸いです。

パーティクルアニメーションは値を少し変化させるだけで、
全く違った演出を表現できます。

↓下記はサンプルの背景色、奥いき等を変化させて制作してみました。

● DEMO

See the Pen Perticle Rotation #03 by Hisami Kurita (@hisamikurita) on CodePen.

良ければ、CodePenのコードを書き換えて遊んでみてください。

この記事をよんでパーティクルアニメーション、CSSに興味を持っていただけたら嬉しいです。

終わりに

こんな作品を週一(目標)で作って、CodePenに投稿してるので、良かったらフォローお願いします！

参考
https://developer.mozilla.org/ja/docs/Web/CSS/animation-delay
https://sass-lang.com/documentation/modules/math