How to make blinking/flashing text with CSS 3

You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself.

Demo

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

 Run code snippetExpand snippet

Here, I am setting the animation duration to be 1 second, and then I am setting the timing to linear. That means it will be constant throughout. Last, I am using infinite. That means it will go on and on.

Note: If this doesn’t work for you, use browser prefixes like -webkit-moz and so on as required for animation and @keyframes. You can refer to my detailed code here


As commented, this won’t work on older versions of Internet Explorer, and for that you need to use jQuery or JavaScript…

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

Thanks to Alnitak for suggesting a better approach.

Demo (Blinker using jQuery)

Leave a Comment