CSS でグリッチエフェクトを実装する方法
最終更新日 - 公開日 2019.07.26
by
CSS で画像とテキストどちらにも使えるグリッチエフェクトを実装する方法を紹介します。
例えば、電脳的な雰囲気のあるサイトを作りたいときに役立つテクニックです。
CSS でグリッチエフェクトを実装する方法
CSS だけでアナログな雰囲気のあるグリッチエフェクトを実装するために CSS プロパティ animation を使用します。
画像とテキストに適用した場合の完成イメージと、ベースの HTML とコピペですぐ使える CSS はこちら。
<!-- ↓ 画像の場合 -->
<div class="flash"><div class="skew"><div class="glitch"><img src="画像URL" alt="" /></div></div></div>
<!-- ↓ テキストの場合 -->
<div class="flash"><div class="skew"><div class="glitch">ABCDEFG</div></div></div>
.flash {
animation: flash .03s infinite;
}
@keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: .8;
}
}
.skew {
animation: skew 3s infinite;
}
@keyframes skew {
0% {
transform: none;
}
33% {
transform: none;
}
33.3% {
transform: skewX(30deg);
}
33.6% {
transform: skewX(-30deg);
}
33.9% {
transform: none;
}
66% {
transform: none;
}
66.3% {
transform: skewX(5deg);
}
66.6% {
transform: skewX(-5deg);
}
66.9% {
transform: none;
}
77% {
transform: none;
}
77.3% {
transform: skewX(15deg);
}
77.6% {
transform: skewX(-15deg);
}
77.9% {
transform: none;
}
}
.glitch {
animation: glitch .3s both infinite;
}
@keyframes glitch {
0% {
transform: translate(0);
}
12.5% {
transform: translate(-1px, 1px);
}
37.5% {
transform: translate(-1px, -1px);
}
62.5% {
transform: translate(1px, 1px);
}
87.5% {
transform: translate(1px, -1px);
}
100% {
transform: translate(0);
}
}
紹介するグリッチエフェクトは「点滅」「歪み」「振動」の3つの動きに分けることができます。
点滅アニメーションを実装する方法
点滅アニメーションで要素全体にノイズが走る感じを表現します。
CSS で点滅アニメーションを実装するには CSS プロパティ animation と opacity を使用します。
.flash {
animation: flash .03s infinite;
}
@keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: .8;
}
}
歪みアニメーションを実装する方法
歪みアニメーションを加えることで、電子機器特有の接触不良的なイメージを表現することができます。
CSS で歪みアニメーションを実装するには CSS プロパティ animation と transform:skewX(); を使用します。
.skew {
animation: skew 3s infinite;
}
@keyframes skew {
0% {
transform: none;
}
33% {
transform: none;
}
33.3% {
transform: skewX(30deg);
}
33.6% {
transform: skewX(-30deg);
}
33.9% {
transform: none;
}
66% {
transform: none;
}
66.3% {
transform: skewX(5deg);
}
66.6% {
transform: skewX(-5deg);
}
66.9% {
transform: none;
}
77% {
transform: none;
}
77.3% {
transform: skewX(15deg);
}
77.6% {
transform: skewX(-15deg);
}
77.9% {
transform: none;
}
}
次に紹介する「振動」でも transform は使用するので、コードをひとまとめにしたいところですが、
表現に合わせて時間の間隔を変えたいため、あえて別で記載するように紹介します。
CSS に不慣れな場合は、1つの要素（divなど）につき、1つの効果を適用させてください。
振動
振動アニメーションは歪みと同様に、接触不良や動作不安定のイメージを演出するために加えます。
「歪み」と「振動」両方の効果を加えると激しさが増すため、どちらか１つだけでも良いかもしれません。
CSS で振動アニメーションを実装するには CSS プロパティ animation と transform:translate(); を使用します。
.glitch {
animation: glitch .3s both infinite;
}
@keyframes glitch {
0% {
transform: translate(0);
}
12.5% {
transform: translate(-1px, 1px);
}
37.5% {
transform: translate(-1px, -1px);
}
62.5% {
transform: translate(1px, 1px);
}
87.5% {
transform: translate(1px, -1px);
}
100% {
transform: translate(0);
}
}
まとめ
CSS で画像とテキストどちらにも使えるグリッチエフェクトを実装する方法を紹介しました。
