CSS3が好きなへっぽこエンジニアです！
以前、CSSを使ってグリッチエフェクト(ジジッ…ジジッ…みたいな動きをする、ノイズのようなエフェクト)もどきを作ってみたので、備忘録として投稿します。
opacityとtransformだけで実装した、簡単に作れるなんちゃってエフェクトです。
こういうの
See the Pen ExYZomY by y-yoshino (@yyko) on CodePen.
かなりざっくりした作りなのですが…
見ての通り、opacityとtranslate3dのアニメーションを細かく設定し、それっぽくなるようにしているだけです。
本当に簡単なので誰でも作れます！
応用
レイヤーが重なっているように見える要素を、::beforeと::afterの疑似要素を用いて作成しました。
これに上記で作ったアニメーションを使って、ちょっとした仕掛けをつけてみます。
See the Pen xxKqXXq by y-yoshino (@yyko) on CodePen.
疑似要素で作ったレイヤーと、テキストにアニメーションをつけ、表示される際にバグが起きているようにしてみました。
例では動きをつけたい要素全てに同じ動き（guritti-anim）を設定し、animation-delayで遅延させ、表示速度を変えているだけの簡易な作りなのですが、それぞれの要素に異なる動きをつけても面白いかもしれません。
使用する場面は限られそうですが、何かの参考になれば幸いです！