How to make blinking/flashing text with CSS 3

by

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?

13 Answers
13

Leave a Comment