🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSテキスト点滅テンプレート：animation: blink で視認性を強調

📝 使用用途

このテンプレートは、テキストを点滅させるアニメーションを実装するために使用します。

📘 解説

このコードでは、`animation: blink` と `@keyframes` を使用して、テキストを1秒間隔で点滅させるアニメーションを実現しています。

🔹 部分コード

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>

💻 完全動作コード

<div class="blink-text">
  このテキストは点滅します。
</div>

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>
コピーしました！

✨ 点滅アニメーションの応用テクニック

緊急タイムセール開催中！

いつも当店をご利用いただき、誠にありがとうございます。

日頃の感謝を込めまして、本日限定のスペシャルタイムセールを実施いたします！人気商品を驚きの価格で手に入れるこのチャンスを、どうぞお見逃しなく！

セール対象商品

  • 高性能ワイヤレスイヤホン
    ¥12,000 → ¥7,200 (40% OFF!)
  • 自動掃除ロボット R-500
    ¥35,000 → ¥24,500 (30% OFF!)
  • オーガニックコットンバスタオル 3枚セット
    ¥5,000 → ¥3,000 (40% OFF!)

セールは本日23:59まで！
商品は在庫がなくなり次第、予告なく終了となります。

今すぐチェック！みたいな感じで使われている例です。

点滅アニメーションは、ユーザーの注目を集めたい重要な要素に効果的です。animation: blinkのパラメータを調整することで、様々なバリエーションを作成できます。例えば、animation: blink 0.5s infinite;とすると、より速い点滅になります。

🌈 カラーアニメーション

透明度だけでなく色も変化させる場合は、@keyframes blink { 0% { opacity: 1; color: red; } 50% { opacity: 0.5; color: blue; } 100% { opacity: 1; color: red; } }のように記述します。色が変化する点滅アニメーションで、より目立たせることが可能です。

⏱ タイミング制御

アニメーションのタイミング関数を変更すると、動きにバリエーションが生まれます。animation-timing-function: ease-in-out;を追加すると、滑らかな変化になります。また、animation-delay: 1s;でアニメーション開始を遅らせることも可能です。

注意点として、点滅アニメーションはアクセシビリティの観点から使いすぎに注意が必要です。WCAGガイドラインでは、1秒間に3回以上の点滅は避けるよう推奨されています。重要な警告メッセージなど、本当に必要な箇所に限定して使用しましょう。

このテクニックは、緊急通知、限定タイムセールのカウントダウン、フォームの必須項目マークなど、ユーザーに確実に気付いてほしい要素に効果的です。適度に使えば、サイトのユーザビリティ向上に役立ちます。

関連テンプレート