【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プロパティの詳細については、以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。