【CSSイラスト】発光するオリキャラのアニメーションを作ってみた

こんにちはです。あっちのそららです。
今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラのアニメーションを作ってみました。

「Result」で確認できます（レスポンシブ対応済）。

アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました（下記参照）。

1. 正円1のアニメーションを開始
2. 正円1の開始から0.3秒経過後、正円2のアニメーションを開始
3. 正円1の開始から0.6秒経過後、正円3のアニメーションを開始

動くタイミングは段階的ですが、変化させる内容は3つとも共通です。色は全てベタ塗りですが、不透明度の上下によって、思いのほか複雑で柔らかい見映えになりました。

絵を描いているのかコードを書いているのか分からなくなる。