【CSS】要素を点滅をさせる方法｜回数の指定など｜animationプロパティ
今回は、CSSで指定した要素を点滅させる方法となります。
【CSS】要素を点滅をさせる例
以下、ソースコードの例となります。
See the Pen CSS Flashing by yic666kr (@yic666kr) on CodePen.
animationプロパティについて
上記CSSでは、animationプロパティで要素を点滅させるアニメーションを指定しています。
なお、animationプロパティで指定した値は順に以下となります。
- @keyframesと紐付ける任意のアニメーション名
- アニメーション時間
- アニメーション回数を指定する値
- アニメーションのイージング（加速・減速）を指定する値
@keyframesで定義したキーフレームについて
今回の例では、点滅させる要素に対してopacityプロパティを0（完全に透明）としています。
そして、キーフレームアニメーションを定義できる@keyframesでは、次のとおり要素の透明度を指定し、要素を点滅させています。
- アニメーション開始50％の時点でopacityプロパティを1（完全に不透明）に指定
点滅回数を指定する場合
上記例では、animationプロパティの値にinfiniteを指定することで、アニメーションを無限に繰り返しています。
アニメーションの回数を指定する場合には、animationプロパティの値にinfiniteではなく、回数を正の整数で指定します。
まとめ
以上がCSSで要素を点滅させる例となります。
また、animationプロパティの詳細については、以下のリンク先を参考にしてみてください。