CSSアニメーションを使った点滅方法とは？パターン別のサンプルコードも公開

Webサイト内の画像やテキストなどを点滅させる方法で悩んでいませんか？

これら要素の点滅がCSSのみで作成できたら嬉しいですよね。

今回は、画像やテキストなどの点滅をCSSで作成したい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSを使った点滅の実装方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

blinkタグと「text-decoration:blink」について

以前のHTMLには、簡単に点滅が実装できるblinkタグがありました。

テキストなどをblinkタグで囲うだけで点滅させることが可能で、文章を強調したいときなどに使われていました。

現在のHTMLでは廃止されており、ブラウザでも動作しないため使用しない方が良いでしょう。

同様に、「text-decoration:blink」という指定も非推奨ですので、使うべきではないです。

それでも、文字を点滅させる効果を出したいことがあると思います。

ここでは、blinkタグなどを使わずにCSSで点滅させる方法を紹介していきます。

CSSアニメーションで要素を点滅させる

画像やテキストなどを点滅させたい場合には、CSSアニメーションを使用します。

まずは例として、四角いボックスを点滅させるアニメーションを作成します。

<div class="box"></div>

CSSは、以下のように記述します。

.box{
  width: 50px;
  height: 50px;
  background: #aaa;

  animation: flash 1s ease infinite;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

縦横50pxの灰色のボックスを用意しました。これを点滅させています。

今回は色を付けただけですが、この中に画像やテキストを入れて点滅させることもできます。

CSSアニメーションの動作は、animationプロパティと@keyframesを使って指定しています。

2つの機能について簡単に説明していきましょう。

animationプロパティについて

animationプロパティは、@keyframesで設定したアニメーションをどのように動かすかを指定します。

animation: flash 1s ease infinite;

「flash」はアニメーションの名前です。「ease」は動きの進め方を指定するもので、最初と最後に滑らかな速さになります。

「1s」「infinite」の部分で、1秒間のアニメーションを無制限に繰り返す指定をしています。

@keyframesについて

@keyframesは、アニメーションの開始から終了までのキーフレームを指定します。

開始を0%、終了を100%で表します。25%や60%など、間の数字はいくつでも設定できます。

前述のコードでは、最初と最後が「opacity: 1」で表示されており、真ん中の50%が「opacity: 0」で透明になっています。

CSSアニメーションで点滅させるサンプルコード

CSSアニメーションを使用した、基本的な点滅のさせ方が分かっていただけたでしょうか。

ここでは、他の点滅のサンプルコードを紹介していきます。

リズムのある点滅

特定のリズムを刻んだ点滅を作成しました。

パッパッと2回短く点灯するような動作をします。

<div class="box"></div>

続いてCSSを書いていきます。

.box{
  width:50px;
  height:50px;
  background:#aaa;

  animation: flash 1s linear infinite;
}
@keyframes flash {
  0%,25%,50%,80%,100%{
    opacity: 0;
  }
  35%{
    opacity: 1;
  }
  65%{
    opacity: 1;
  }
}

今回は、animationプロパティの「ease」の部分を「linear」に指定しています。

これは、一定の速度で進行することを示します。

キーフレームでは、透明である範囲を長く、不透明の時間を短くすることで、リズムのある短い点滅を実装しています。

色が切り替わる点滅

点滅する色を増やしたアニメーションを作成しました。

<div class="box"></div>

CSSは以下のように記述します。

.box{
  width:50px;
  height:50px;

  animation: flash 1s linear infinite;
}
@keyframes flash {
  0%,33%,66%,100%{
    opacity: 0;
  }
  16%{
    opacity: 1;
    background:#00bfff;
  }
  49%{
    opacity: 1;
    background:#3cb371;
  }
  83%{
    opacity: 1;
    background:#ffa500;
  }
}

ボックスが3色に切り替わるアニメーションです。

色が変わるときに一度透明にしています。

キーフレームの数字を変えるなどして、どういう挙動になるか確認してみてください。

まとめ：点滅にはCSSアニメーションを使おう

今回は、CSSで要素を点滅させる方法について解説してきました。

点滅の実装に使われていたblinkタグなどは現在使用できない、ということもお伝えしましたね。

CSSアニメーションは点滅以外にも、要素の大きさを変えたり、回転させたりと様々な動きが可能です。

是非、色々と試してみてくださいね。