【CSS】要素を点滅させる方法｜opacity・visibility・color別の実装とアクセシビリティ対応

/* キーフレームを定義 */
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* 要素に適用 */
.blink {
  animation: blink 1s infinite;
}

<p class="blink">この文字が点滅します</p>

animation プロパティの構文

animation: 名前 時間 繰り返し; がショートハンドです。個別に書く場合は以下の通りです。

• animation-name ── キーフレーム名（例: blink）
• animation-duration ── 1サイクルの時間（例: 1s）
• animation-iteration-count ── 繰り返し回数（例: infinite）
• animation-timing-function ── 速度カーブ（例: ease, linear）

@keyframes fade-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.fade-blink {
  animation: fade-blink 2s ease-in-out infinite;
}

@keyframes soft-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.soft-blink {
  animation: soft-blink 1.5s ease-in-out infinite;
}

ポイント：opacity の点滅は要素がなめらかに変化するため、ユーザーに優しい印象を与えます。UX を重視する場合はこの方法がおすすめです。

@keyframes blink-visibility {
  0%, 100% { visibility: visible; }
  50%       { visibility: hidden; }
}

.blink-hard {
  animation: blink-visibility 1s step-end infinite;
}

注意：visibility: hidden は要素が非表示になってもレイアウト上のスペースは保持されます。display: none のようにレイアウトが崩れることはありません。animation-timing-function に step-end を指定することで、なめらかな変化ではなくパッと切り替わる動作になります。

@keyframes blink-color {
  0%, 100% { color: #e74c3c; }
  50%       { color: transparent; }
}

.blink-text {
  animation: blink-color 1s infinite;
  font-weight: bold;
}

@keyframes blink-bg {
  0%, 100% { background-color: #fff3cd; }
  50%       { background-color: #ffc107; }
}

.blink-highlight {
  padding: 8px 16px;
  border-radius: 4px;
  animation: blink-bg 1.5s ease-in-out infinite;
}

@keyframes blink-border {
  0%, 100% { border-color: #e74c3c; }
  50%       { border-color: transparent; }
}

.blink-border {
  border: 2px solid #e74c3c;
  padding: 12px;
  animation: blink-border 1s infinite;
}

/* 高速点滅（0.3秒サイクル） */
.blink-fast {
  animation: blink 0.3s infinite;
}

/* 通常点滅（1秒サイクル） */
.blink-normal {
  animation: blink 1s infinite;
}

/* ゆっくり点滅（3秒サイクル） */
.blink-slow {
  animation: blink 3s infinite;
}

ポイント：animation-timing-function も点滅の印象に大きく影響します。ease-in-out でなめらかに、linear で一定速度に、step-end でパッと切り替え、と使い分けましょう。

/* 3回だけ点滅 */
.blink-3times {
  animation: blink 1s 3;
}

/* 5回点滅して最後は表示状態で停止 */
.blink-5times {
  animation: blink 1s 5;
  animation-fill-mode: forwards;
}

/* 小数も指定可能（1.5回 = 途中で止まる） */
.blink-half {
  animation: blink 1s 1.5;
  animation-fill-mode: forwards;
}

animation-fill-mode について

• forwards ── アニメーション終了後、最後のキーフレームの状態を維持
• backwards ── アニメーション開始前に最初のキーフレームの状態を適用
• both ── forwards と backwards の両方を適用
• none（デフォルト）── アニメーション前後の状態に影響しない

@keyframes dot-blink {
  0%, 80%, 100% { opacity: 0; }
  40%              { opacity: 1; }
}

.loading-dots {
  display: flex;
  gap: 8px;
}

.loading-dots span {
  width: 12px;
  height: 12px;
  background: #3b82f6;
  border-radius: 50%;
  animation: dot-blink 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

<div class="loading-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

/* CSS */
@keyframes char-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

.wave-text span {
  display: inline-block;
  animation: char-blink 1.5s ease-in-out infinite;
}

.wave-text span:nth-child(1) { animation-delay: 0s; }
.wave-text span:nth-child(2) { animation-delay: 0.1s; }
.wave-text span:nth-child(3) { animation-delay: 0.2s; }
.wave-text span:nth-child(4) { animation-delay: 0.3s; }
.wave-text span:nth-child(5) { animation-delay: 0.4s; }

<!-- HTML -->
<div class="wave-text">
  <span>L</span>
  <span>o</span>
  <span>a</span>
  <span>d</span>
  <span>...</span>
</div>

/* カーソル風のパッと点滅 */
.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: #333;
  animation: blink 1s step-end infinite;
}

/* 呼吸するような点滅 */
.breathing {
  animation: fade-blink 3s ease-in-out infinite;
}

/* これは動作しません */
.old-blink {
  text-decoration: blink; /* 非推奨・廃止 */
}

注意：text-decoration: blink は CSS2 で定義されましたが、アクセシビリティの問題やユーザー体験の悪化を理由に CSS3 で廃止されました。Chrome・Firefox・Safari・Edge のいずれも対応していません。点滅が必要な場合は @keyframes + animation を使いましょう。

/* 通常時の点滅アニメーション */
.blink {
  animation: blink 1s infinite;
}

/* モーション軽減設定時はアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .blink {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

アクセシビリティのチェックリスト

• prefers-reduced-motion: reduce でアニメーションを無効化する
• 1秒間に3回以上の閃光を避ける（duration を 0.3s 未満にしない）
• 点滅は装飾目的のみに使い、情報伝達を点滅だけに頼らない
• 可能であれば点滅回数を制限し、一定時間で停止させる
• 色だけでなく、テキストやアイコンでも状態を伝える

/* CSS */
@keyframes badge-pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.notification-icon {
  position: relative;
  display: inline-block;
  font-size: 24px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  animation: badge-pulse 1.5s ease-in-out infinite;
}

<!-- HTML -->
<div class="notification-icon">
  🔔
  <span class="notification-badge"></span>
</div>

/* CSS */
@keyframes error-blink {
  0%, 100% { background-color: #fef2f2; }
  50%       { background-color: #fecaca; }
}

.error-message {
  padding: 12px 16px;
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #dc2626;
  font-weight: bold;
  animation: error-blink 1s ease-in-out 3;
}

<!-- HTML -->
<div class="error-message">
  入力内容にエラーがあります。
</div>

ポイント：エラー表示の点滅は animation-iteration-count: 3 のように回数を制限し、注意を引いた後は停止させるのがベストプラクティスです。永遠に点滅し続けるとユーザーのストレスになります。

/* CSS */
@keyframes skeleton-pulse {
  0%   { background-color: #e2e8f0; }
  50%  { background-color: #f1f5f9; }
  100% { background-color: #e2e8f0; }
}

.skeleton {
  border-radius: 4px;
  animation: skeleton-pulse 2s ease-in-out infinite;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-text {
  height: 16px;
  width: 100%;
  margin-bottom: 8px;
}

<!-- HTML -->
<div style="max-width:400px;padding:20px;">
  <div class="skeleton skeleton-title"></div>
  <div class="skeleton skeleton-text"></div>
  <div class="skeleton skeleton-text" style="width:80%;"></div>
</div>

/* CSS */
.rec-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #dc2626;
}

.rec-dot {
  width: 12px;
  height: 12px;
  background: #dc2626;
  border-radius: 50%;
  animation: blink 1s ease-in-out infinite;
}

<!-- HTML -->
<div class="rec-indicator">
  <span class="rec-dot"></span>
  REC
</div>

<!-- HTML -->
<button id="toggleBtn">点滅のON/OFF</button>
<p id="target">この文字が点滅します</p>

<!-- CSS -->
<style>
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.is-blinking {
  animation: blink 1s infinite;
}
</style>

<!-- JavaScript -->
<script>
const btn = document.getElementById('toggleBtn');
const target = document.getElementById('target');

btn.addEventListener('click', () => {
  target.classList.toggle('is-blinking');
});
</script>

const element = document.querySelector('.alert-message');

// 点滅を開始
element.classList.add('is-blinking');

// 5秒後に点滅を停止
setTimeout(() => {
  element.classList.remove('is-blinking');
}, 5000);

const el = document.getElementById('blink-target');
let visible = true;

const blinkInterval = setInterval(() => {
  visible = !visible;
  el.style.opacity = visible ? '1' : '0';
}, 500);

// 停止する場合
// clearInterval(blinkInterval);

注意：setInterval による点滅はCSSアニメーションに比べてパフォーマンスが劣ります。CSSアニメーションはブラウザがGPUで最適化して描画しますが、JavaScript の setInterval はメインスレッドで実行されるため、処理が重い場面ではカクつく可能性があります。特別な理由がない限り、CSSアニメーションを優先しましょう。