CSSではじめ数秒点滅させ、後は通常表示させたいです。

Question

お世話になります。

下記コードのように点滅させようとしているのですが、点滅した後にすぐ消えてしまいます。
この点滅設定の後に表示させるようにするにはどのように処理をしたら良いでしょうか？

<div class="light_box"></div>

//widthとheightは別途つけてあります

.light_box{
  opacity: 0;
  animation: flash 0.2s 3 linear;
}

@keyframes flash {
  50% {
      opacity: 1;
  }
}

点滅後の処理について、調べても見つからずご教示頂けると幸いです。
お手数ですがよろしくお願いいたします。

Comments

[m.ts10806]

JavaScriptは使用しない前提でしょうか。

[HIDETAKA0711]

いえ、JavaScript使用でも問題ないです！
ご確認下さってありがとうございます。

もし可能でありましたらご教示願います。
宜しくおねがいいたします。

Answer 1

animation-fill-mode: forwards;でできませんか？

【animation-fill-mode - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

Comments

[HIDETAKA0711]

このプロパティは知りませんでした。
凄いです、見事に解決出来ました！

urlまで、ご丁寧にありがとうございましたm( _ _)m