html5 - How to make blinking/flashing text with CSS 3? -

currently, have code:

@-webkit-keyframes blinker {   { opacity: 1.0; }   { 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, blinks in "one direction". mean, fades out, , appears opacity: 1.0, again fades out, appears again, , on... fade out, , "raise" fade again opacity: 1.0. possible?

you first setting opacity: 1; , ending on 0, starts 0% , ends on 100% instead set opacity 0 @ 50% , rest take care of iteself.

demo

.blink_me {   animation: blinker 1s linear infinite; }  @keyframes blinker {     50% { opacity: 0; } } 

here, setting animation duration should 1 second, setting timing linear means constant throughout, , last using infinite means go on , on.

note: if doesn't work you, use browser prefixes -webkit, -moz , on required animation , @keyframes. can refer detailed code here

---

as commented, won't work on older versions of internet explorer, that, need use jquery or javascript....

(function blink() {    $('.blink_me').fadeout(500).fadein(500, blink);  })(); 

^{thanks alnitak suggesting better approach.}

demo (blinker using jquery)