How to make blinking/flashing text with CSS 3

Question

Currently, I have this code:

@-webkit-keyframes blinker {   from { opacity: 1.0; }   to { opacity: 0.0; } }  .waitingForConnection {   -webkit-animation-name: blinker;   -webkit-animation-iteration-count: infinite;   -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);   -webkit-animation-duration: 1.7s; } 

It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with opacity: 1.0, then again fades out, appears again, and so on...

I would like it to fade out, and then "raise" from this fade back again to opacity: 1.0. Is that possible?

Answer 1

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>

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)