CSSだけで作る！クールなノイズアニメーション

Make some hacky noise with CSS gradients

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

偶然見つけたエフェクトで、かなりクールだと思いました。繰り返しの放射状グラデーションのリングのサイズを@propertyを使って非常にゆっくりと0pxにアニメーションさせていたところ、0に近づくと狂い始めることに気づきました。

そこで、私は考え始めました。

セットアップ

最初に作業していたマスクは、適度な5pxと5pxの間隔の放射状の繰り返しマスクです：

.noise {
  --lines: 4px;
  
  mask: repeating-radial-gradient(
    circle at center,
    #000,
    var(--lines),
    #000,
    0, /* トランジションのヒントでコードが管理しやすくなります */
    #0000,
    calc(var(--lines) * 2),
    #0000 0 /* 末尾の0はハードストップロジックの一部です */
  );
}

テキストの上に重ねるとまだかなりクールな効果だと思います！

トリック

しかし、その--linesの値を超小さな値に変更すると、歪み始め、サブピクセルの丸め処理に入り込むのです。

.noise {
  --lines: 0.0003px;
}

そして、ノイズの出来上がりです。ある時は放射状のノイズにも見えます。その起源の痕跡です。

アニメーション化

@propertyでノイズをアニメーション化できることは、この効果を偶然発見したときから分かっていました。まだ分からなかったのは、どんな面白いつまみが操作できるのか、ということでした！

@propertyでグラデーションアニメーションの楽しみを開始します：

@property --lines {
  syntax: "<length>";
  inherits: false;
  initial-value: 0.00010px;
}

そして、微妙にある小さなサブピクセル値から別の値へアニメーションするキーフレームを設定します。

@keyframes liner {
  50% {
    --lines: 0.00012px;
  }
}

これらの要素をアニメーション用に要素にリンクします：

@import "https://unpkg.com/open-props/durations.min.css";

.noise {
  animation: liner var(--hour) linear infinite;
}

そしてノイズを観察してください！

また、CSSの力が60fpsのゲームエンジンのように処理する絶対的なカオスを観察してください。

最後に

10pxのラインと.5sやvar(--atom)のような適度な持続時間など、合理的な値を試してみるのもいいでしょう。