ojek ojek - 3 months ago 13
CSS Question

How to make blinking/flashing text with css3?

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?


You are first setting opacity: 1; and than 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 rest will take care of iteself.


.blink_me {
  animation: blinker 1s linear infinite;

@keyframes blinker {  
  50% { opacity: 0; }

Here, am setting animation duration should be 1 second, than am setting the timing to linear that means it will be constant throughout, and last 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, 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)