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

公開日: 2021.11.10
更新日: 2024.01.03
cssアニメーションを使った点滅方法とは

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

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

今回は、画像やテキストなどの点滅を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アニメーションは点滅以外にも、要素の大きさを変えたり、回転させたりと様々な動きが可能です。

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

関連記事

  • Railsのdeviseを用いてログイン認証を実装する方法を解説

    【Rails入門説明書】renderについて解説

    公開日: 2018.10.31
    更新日: 2024.01.29
  • CSSで背景を透過させる方法3つを徹底解説

    CSSで背景を透過させる方法3つを徹底解説

    公開日: 2021.10.25
    更新日: 2024.01.03
  • HTMLの勉強に有効な資格3つを紹介!

    【初心者向け】HTMLの勉強に有効な資格3つを紹介!

    公開日: 2021.09.15
    更新日: 2024.01.11
  • HTMLで枠線の色味を指定するには?上下左右の分け方も解説

    HTMLで枠線の色を指定するには?上下左右の分け方も解説

    公開日: 2021.09.15
    更新日: 2024.01.12
  • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    © 2024 WEBCAMP MEDIA Powered by AFFINGER5