How to make flashing text in Css?

Question

I have an understanding that most web browsers do not support the flashing text animation anymore with the following code: <blink> your text</blink>, however, are there other methods that provide the flashing animation for the text in html or css?

Answer 1

Yes! You can use CSS3 animations to handle that now.

HTML:

 <h1 class="flash">Look at me flash</h1>

CSS:

.flash {
   animation-name: flash;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes flash {
    from {color: red;}
    to {color: black;}
}

Here's a link to a codepen to see it in action.

Answer 2

Maybe not as efficient as @SupperSam's answer, but maybe a little bit more cross-browser friendly. You could use JS (jQuery) to achieve the flashing effect by toggling a class.

eg.

$(document).ready(function(){
  setInterval(function(){
    $('.flash').toggleClass('active');
  }, 500);
});

See the fiddle here: http://jsfiddle.net/pavkr/8yned9f9/