点滅表示の作り方｜opacity と setInterval

2026年8月2日

テキストや要素を点滅させて目立たせる

CSS の @keyframes と opacity、JavaScript の setInterval() で要素を点滅させる方法を4パターンで解説します。各デモと同じ動きを再現できるHTML・CSS・JavaScriptを掲載しています。
HTML・CSS・JSコードプレビューツールでも動作を確認できます。

このページで作るもの

フワッとゆっくり点滅
チカチカと素早く点滅
デジタル点滅
点滅速度の変更

① フワッとゆっくり点滅 — opacity と alternate

● フワッと点滅

CSSのみで自動アニメーション

HTML

<div class="bl-soft-badge">
  <span class="bl-soft-dot">●</span>
  <span class="bl-soft-lbl">フワッと点滅</span>
</div>

CSS

.bl-soft-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 40px;
  background: #eef2ff;
  border: 1px solid #a5b4fc;
  animation: blSoftBlink 1s ease-in-out infinite alternate;
}

.bl-soft-dot {
  color: #4f46e5;
  font-size: 0.85rem;
}

.bl-soft-lbl {
  color: #312e81;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@keyframes blSoftBlink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

animation-direction: alternate で往復する

@keyframes で opacity を 0→1 に変え、animation に infinite alternate を付けます。alternate があると再生方向が交互に反転し、フェードインとフェードアウトが途切れなく続きます。

② チカチカと素早く点滅 — 短い duration と linear

▲ チカチカ点滅

CSSのみで自動アニメーション

HTML

<div class="bl-fast-badge">
  <span class="bl-fast-icon">▲</span>
  <span class="bl-fast-lbl">チカチカ点滅</span>
</div>

CSS

.bl-fast-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 40px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  animation: blFastBlink 0.3s linear infinite;
}

.bl-fast-icon {
  color: #dc2626;
  font-size: 0.75rem;
}

.bl-fast-lbl {
  color: #991b1b;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@keyframes blFastBlink {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}

linear と短い duration でチカチカ感を出す

0.3s の短い周期と linear（等速）を組み合わせると、急な点滅になります。keyframes の 20% までに opacity: 1 へ達し、残りの時間で暗くなるため、鋭いチカチカ感が出ます。

③ デジタル点滅 — setInterval で visibility を切替

1秒ごとに点滅

状態: 停止中

HTML

<div class="bl-dig-frame">
  <span class="bl-dig-txt">1秒ごとに点滅</span>
</div>

CSS

.bl-dig-frame {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #64748b;
  font-family: 'Consolas', 'Courier New', monospace;
}

.bl-dig-txt {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #4ade80;
}

.bl-dig-txt.is-off {
  visibility: hidden;
}

var blinkEl = document.querySelector('.bl-dig-txt');

setInterval(function() {
  blinkEl.classList.toggle('is-off');
}, 1000);

setInterval で visibility を瞬時に切り替え

CSS アニメーションはフワッとした動きになります。setInterval でクラスを付け外し、visibility を hidden / visible で切り替えると、デジタルな点滅になります。display: none と違い、レイアウト上の領域は残るので周囲が崩れません。

④ 点滅速度の変更 — clearInterval で再設定

速度を変えて点滅

点滅間隔: 1000ms

状態: 停止中

HTML

<div class="bl-spd-frame">
  <span class="bl-spd-txt">速度を変えて点滅</span>
</div>

<input class="bl-spd-slider" type="range" min="200" max="2000" step="100" value="1000">

CSS

.bl-spd-frame {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #64748b;
  font-family: 'Consolas', 'Courier New', monospace;
}

.bl-spd-txt {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #4ade80;
}

.bl-spd-txt.is-off {
  visibility: hidden;
}

.bl-spd-slider {
  display: block;
  width: 200px;
  margin: 16px auto;
  cursor: pointer;
}

var blinkEl = document.querySelector('.bl-spd-txt');
var speedSlider = document.querySelector('.bl-spd-slider');
var timerRef = null;

function blinkToggle() {
  blinkEl.classList.toggle('is-off');
}

function startTimer(ms) {
  if (timerRef) clearInterval(timerRef);
  blinkEl.classList.remove('is-off');
  timerRef = setInterval(blinkToggle, ms);
}

speedSlider.addEventListener('input', function() {
  startTimer(Number(speedSlider.value));
});

startTimer(1000);

clearInterval で間隔を作り直す

速度を変えるときは、保存しておいたタイマーを clearInterval で止めてから、新しい間隔で setInterval し直します。タイマー参照を変数に残しておかないと、あとから止められません。

注意点：点滅は注意を引きやすい反面、長時間続くと読みにくく感じることがあります。お知らせやエラーなど「今見てほしい」要素に限定し、ページ全体では使いすぎないようにしてください。また、開始したタイマーは clearInterval で止める習慣を付けましょう。

CSS と JS のどちらを使うべき？

なめらかな点滅なら CSS の @keyframes が手軽です。ON/OFF のデジタル切替や速度の動的変更なら ③・④ の setInterval が向いています。

visibility と display の違いは？

visibility: hidden は領域を残したまま見えなくします。display: none は領域ごと消えるため、点滅中に周囲のレイアウトが動いてしまいます。

アクセシビリティで気をつけることは？

速い点滅は人によっては負担になります。必要なら prefers-reduced-motion でアニメーションを弱めるか止める指定を検討してください。

フェード切替との違いは？

点滅は同じ要素の見え方を繰り返します。内容を順番に切り替えるならフェードイン切り替えが向いています。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。