【JS&CSS】テキストや画像を点滅させる方法

CSSのanimationと@keyframesや、JavaScript のsetInterval()関数を使って、テキストや画像を点滅させる方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

点滅はユーザーの視覚的な負荷を増やしてしまいます。
特に視覚的に敏感なユーザーにとっては、頭痛や偏頭痛を引き起こす可能性もあるため、実装する際は注意しましょう。

実装例とコード

複雑なアニメーションには、CSSプロパティの@keyframesを使います！
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。

div {
  animation: 1s xxx;
}

@keyframes xxx {   /* xxxは好きな名前でOK */
  0% {
    /* 変化前の状態 */
  }
  50% {
    /* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
  }
  100% {
    /* 変化後の状態 */
  }
}

上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

シンプルなアニメーションについてはこちら

マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。

あわせて読みたい

【JS&CSS】クリック（タップ）で画像を拡大させる transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…

function show() {
  console.log('hello');
}

setInterval(show, 1000);

「@keyframes」と「setInterval関数」を使うことで、以下のように『表示をゆっくり変えていく』といったアニメーションを作ることをもできます。

詳しくは以下記事で解説していますので、合わせてご覧ください。

あわせて読みたい

【JS&CSS】一定時間毎に表示がフワッと変わる JavaScript のsetInterval()関数とCSSの@keyframesを組み合わせ、一定時間毎に表示がフワッと変わる実装方法を紹介します。 なお、フワッとではなく瞬時に切り替えるだ…

以下、本記事実装例のHTML・CSS・JavaScriptコードです。

フワッとゆっくり点滅させる

CSSのみで実装できます。（JavaScript不要）

<p class="custom-blink">フワッと点滅します。</p>

.custom-blink {
  animation: blink-slow 1s infinite;
}

@keyframes blink-slow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

チカチカと素早く点滅させる

CSSのみで実装できます。（JavaScript不要）

<p class="custom-blink">チカチカと点滅します。</p>

.custom-blink {
  animation: blink-fast .3s linear infinite;
}

@keyframes blink-fast {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
}

一定時間感覚で機械的に点滅させる

CSSのアニメーションではアナログ的な動きになってしまうため、デジタル的に瞬時に切り替えるにはJavaScriptを使います。

<p class="custom-blink">1秒間隔で点滅します。</p>

.custom-blink.hidden {
  display: none;
}

const customBlink = document.querySelector('.custom-blink');

function blink() {
    customBlink.classList.toggle('hidden');    
}

setInterval(blink, 1000);

まとめ

以上、3つの点滅パターンについて実装方法を紹介しました。

点滅の具合（フワッと点滅させるのか、瞬時に点滅させるのか）や点滅の間隔は自由に設定できるので、色々試してみてお気に入りの状態を模索してください！（あまりチカチカさせると目が疲れてしまうので、ホドホドに。）