CSS Blinking Text Template: Highlight with animation: blink

📝 Usage

This template is used to create a blinking text animation.

📘 Explanation

This code uses `animation: blink` and `@keyframes` to make text blink at 1-second intervals.

🔹 Partial Code

<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>

💻 Full Working Code

<div class="blink-text">
  This text is blinking.
</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>

Copied!

Emergency Time Sale Happening Now!

Thank you very much for always shopping with us.

As a token of our appreciation, we are holding a special one-day-only time sale today! Don’t miss this chance to grab popular items at unbelievable prices!

Sale Items

High-Performance Wireless Earphones

¥12,000 → ¥7,200 (40% OFF!)
Automatic Cleaning Robot R-500

¥35,000 → ¥24,500 (30% OFF!)
Organic Cotton Bath Towel Set of 3

¥5,000 → ¥3,000 (40% OFF!)

The sale ends today at 11:59 PM!
Items may sell out and the sale may end without notice.

This is an example of how to use phrases like “Check it out now!”

✨ Advanced Techniques for Blink Animation

Blink animations are effective for drawing users' attention to important elements. By adjusting the parameters of animation: blink, you can create various variations. For example, animation: blink 0.5s infinite; results in a faster blinking effect.

🌈 Color Animation

If you want to change not only the opacity but also the color, use a keyframe like @keyframes blink { 0% { opacity: 1; color: red; } 50% { opacity: 0.5; color: blue; } 100% { opacity: 1; color: red; } }. This creates a blinking animation that changes color, making the element more eye-catching.

⏱ Timing Control

Changing the animation timing function adds variety to the movement. Adding animation-timing-function: ease-in-out; results in smoother transitions. You can also delay the animation start with animation-delay: 1s;.

Note that blink animations should be used with care from an accessibility standpoint. According to WCAG guidelines, blinking more than three times per second should be avoided. Use this effect only where truly necessary, such as important warning messages.

This technique is especially useful for urgent notifications, countdowns for limited-time sales, and marking required form fields—places where you want to ensure the user notices the content. When used moderately, it can help improve overall site usability.