CSS AnimationでアニメOPを再現する

アニメOPをCSSで再現するシリーズ

再現するのはこのアニメ

ダンガンロンパ絶望編 OP 「カミイロアワセ」

冒頭の にゅるっとピンクの棒が出て、テキストがチラチラする演出を再現する。

作ってみたのはこちら
(ちょっとサイズの調整がうまく行かなかったので本家サイトで確認できます。)

テキストのチラつき表現だけちょっと手こずりまして,変化の前半だけ、アニメーションを付けたい場合は下記のように指定すると良い感じに表現できました。

@keyframes textFlicker {
  0%{
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  25%{
    opacity: 0;
  }
  35%{
    opacity: 1;
  }
  45%{
    opacity: 0;
  }
  55%{
    opacity: 1;//ここでアニメーション終了
  }
  100%{
    opacity: 1;//55%の状態を維持する。
  }
}