How to make blinking/flashing text with CSS 3

html

responsive-design

css-3

animation

byNikita Barsukov·Feb 19, 2025

For a rapid CSS3 blinking effect, use the @keyframes rule along with the opacity attribute. Here's a crisp example:

@keyframes blink {
  50% { opacity: 0; } // Now you see me, now you don't!
}

.blink-text {
  animation: blink 1s step-end infinite; // Keep on blinking forever!
}

Add the .blink-text class to your HTML text:

<span class="blink-text">I blink, therefore I am!</span>

This renders your text in a blink mode, creating an on-off effect every second.

Make it smooth and even

Ensure your blink animation doesn't feel erratic—a smooth, consistent rhythm works best. Setting your animation-timing-function to linear ensures a steady blink while the infinite keyword keeps the excitement going without needing extra JavaScript:

@keyframes smooth-blink {
  50% { opacity: 0; } // smooth operator over here!
}

.smooth-text {
  animation: smooth-blink 1s linear infinite; // smooth sailing to infinity and beyond
}

This creates a uniform transition and a polished blink effect.

Compatibility across browsers

Your animation should put on a show for everyone! Adding vendor prefixes ensures more users across different browsers see your sparkling text. Additionally, incorporate a jQuery fallback system with .fadeOut().fadeIn(), as an extra safety net for those legacy IE users:

/* CSS */
@-webkit-keyframes blink { /* Let's make Safari and Chrome blink too */
  50% { opacity: 0; }
}

@-moz-keyframes blink { /* Firefox is not left out */
  50% { opacity: 0; }
}

@-ms-keyframes blink { /* Internet Explorer, you're invited too */
  50% { opacity: 0; }
}

@-o-keyframes blink { /* Opera, join the blinking party */
  50% { opacity: 0; }
}

.compatible-blink-text {
  -webkit-animation: blink 1s linear infinite; /* Safari and Chrome, here we go! */
  -moz-animation: blink 1s linear infinite; /* Firefox, join the fun */
  -ms-animation: blink 1s linear infinite; /* It's party time for Internet Explorer */
  -o-animation: blink 1s linear infinite; /* Opera, it's your turn */
  animation: blink 1s linear infinite; // All together now!
}

/* jQuery fallback */
$(document).ready(function() { // Let's play safe with the grandpa browsers
  function blink() {
    $('.compatible-blink-text').fadeOut(500).fadeIn(500, blink);
  }
  blink();
});

Enhanced user experience

Ensure that blinking text serves a clear goal and doesn't distract. Here are some techniques:

Draw attention subtly

Use a subtler blink for notification icons or informational messages to be polite yet effective:

@keyframes soft-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; } // Blink softly, carry strong messages!
}

.notification {
  animation: soft-blink 2s linear infinite; // Notifications that don't annoy!
}

Consider accessibility

Remember-blindly repeating blinking text can be problematic for individuals with photosensitive epilepsy. Add an option to stop or reduce blinking:

<button onclick="stopBlinking()">Serious button to Stop Blinking</button>

<script>
function stopBlinking() {
  document.querySelector('.blink-text').style.animation = 'none'; // Enough of the blink, let's get serious
}
</script>

Use color for visual cues

By tying color transitions with opacity, you can create an eye-catching effect that signals a status change:

@keyframes color-blink {
  0%, 100% { color: green; opacity: 1; } // As green as a fresh start
  50% { color: red; opacity: 0; } // Red want attention!
}

.status-text {
  animation: color-blink 3s linear infinite; // color me blink!
}