CSSだけで簡単にグリッチエフェクト風アニメーションを実装する

目標: “なんちゃって”グリッチエフェクトを楽に実装する

グリッチエフェクトとは、ノイズや歪みなどの"画面の乱れ"の効果のことです。
壊れかけのブラウン管テレビのような、ちょっと不気味な雰囲気を醸し出したいときに用いられます。
動画においては、Adobe PremiereやAfter Effectsで割と手軽にエフェクトをつけられるので、最近はYouTube等でもよく見かけます。

このエフェクトをWebページでもやりたかったのですが、本当に使うか分からずとりあえずで入れてみたかったという経緯から、簡単になんちゃってグリッチエフェクトを実装してみました。

「なんちゃって」の意味合いとしては、本当ならRGBを分けたレイヤー要素を重ねたり、ノイズをのせたりするのが本来のグリッチなのでしょうが、純粋に大変なのでそれっぽく見せることを目標としている、と理解いただければ幸いです。

実装

それっぽくでいいので、ノイズをのせたり要素を重ねたりなどは（面倒なので）せず、簡単なCSSのプロパティのみで実現していきます。
また、テキスト・画像、いずれにも簡単にエフェクトを適用できるように作ります。

なんちゃってグリッチのために使うプロパティと用途を以下の通り考えてみました。

• opacityでチカチカさせる
• transform: skew()で歪んでいるかのように見せる
• transform: translate()でブレ感を出す
• filter: invert(100%)でネガポジ反転させる（IE非対応）

これらを、いい感じにキーフレームを打って配置していきます。
歪み具合や移動具合は好みに応じて微調整してください。

以下は、10秒でループさせる想定のキーフレームです。つまり、0.1% = 0.1秒になります。
動画制作時は、秒ではなくフレームを用いることが多いので少し違和感を感じる方もいらっしゃるかもしれませんが、とりあえず分かりやすいのでこれでいきます。
（秒ではなく30fpsとかでフレーム割った方が実はキレイだったりするのでしょうか。未検証なので今後調査・確認してみたいと思います）

@keyframes glitch_effect {
  0% {
    opacity: 1;
    transform: none;
  }
  33% {
    transform: none;
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    transform: skewY(20deg) translate(8px, 6px);
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
    transform: skewY(-10deg) translate(-10px, -10px);
  }
  33.9% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    transform: none;
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    transform: skewX(5deg) translate(-4px, 10px);
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
    transform: skewX(-7deg) translate(4px, -6px);
  }
  66.9% {
    opacity: 1;
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewY(10deg) translate(10px, -6px);
  }
  77.6% {
    transform: skewY(-22deg) translate(-5px, 8px);
    filter: invert(100%);
  }
  77.9% {
    transform: none;
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
}

これでキーフレームは完成したので、これを適用させます。

要素にglitchというクラスを付与すれば、グリッチエフェクト風がかかるようにします。

<div class="img_container glitch">
  <img src="sample.jpg">
</div>

<div class="txt_container glitch">
  <span>Sample</span>
  <span>サンプル</span>
</div>

.glitch {
  animation: glitch_effect 10s infinite;
}

.txt_container > span {
  background: #fff;
}

テキストに関しては、spanで囲み白い座布団を敷いています。
これは、文字色が黒でページ全体の背景が白だった場合、文字色のみネガポジ反転するため、文字は白、ページの背景は白のままとなってしまい、文字の可読性どころか可視性さえも失われてしまうことを防ぐためです。デザイン的に座布団を良しとするかは状況に応じて使い分けてください。

実際に実装した結果はこちらです。

See the Pen Glitch Effect by heeroo-ymsw (@heeroo-ymsw) on CodePen.

チカチカが目に悪い気もしますが、それっぽい感じにはなったと思います。

まとめ

今回は、馴染みのあるCSSプロパティを用いて、簡単にグリッチエフェクト風のアニメーションを実装してみました。

この度制作していたページに関しては、ネガポジ反転がうまく映えるサイトでしたので非常に有効な手段だったのではないかと自負しています。

こんな偽物じゃなくて、もっと本格的なグリッチエフェクトを再現したい方は、ググっていただくと、疑似要素等を用いてレイヤーを重ねて再現されているものなどが見つかると思いますので、ぜひそちらを参考になさってください。

余談: top, right, bottom, leftではなくtranslate()を用いた理由

全くもって余談ではありますが、ざっくり備忘録的に残します。

今回、アニメーションではtransform: translate()を用いました。
しかし、要素を動かすのであれば、position: absoluteでtopやleftで位置を指定する方法もあります。

やっていることは同じですが、両者の違いはその処理方法にあります。

topやleftはCPUで処理され、要素の位置が変更される度、ペイント処理が行われるのに対し、
translate()はGPUで処理され、要素のレイヤーを移動し合成することでレンダリングされます。

要素の描画にはいくつか手順を踏みますが、positionやmargin、width、heightに変更がかかると、その描画手順の中でもカロリーの高い処理が再度走ることになります。(リフロー・リペイント)
そこでtransformを用いることで、このカロリー高めな処理をすっ飛ばして、レイヤー合成処理のみで描画を完了できるので、パフォーマンスが向上する、ということになります。

その他パフォーマンス関連だと、will-changeやtransform: translateZ(0)などもありますが、またそれは別のお話し。