html – How to make blinking/flashing text with CSS 3

html – How to make blinking/flashing text with CSS 3

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 doesnt 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 wont 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)

The best way to get a pure 100% on, 100% off blink, like the old <blink> is like this:

.blink {
  animation: blinker 1s step-start infinite;
}

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

<div class=blink>BLINK</div>

html – How to make blinking/flashing text with CSS 3

Use the alternate value for animation-direction (and you dont need to add any keframes this way).

alternate

The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an ease-in animation is replaced with an ease-out animation when played in reverse. The count to determinate if it is an even or an odd iteration starts at one.

CSS:

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

Ive removed the from keyframe. If its missing, it gets generated from the value youve set for the animated property (opacity in this case) on the element, or if you havent set it (and you havent in this case), from the default value (which is 1 for opacity).

And please dont use just the WebKit version. Add the unprefixed one after it as well. If you just want to write less code, use the shorthand.

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

.waitingForConnection2 {
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }

.waitingForConnection3 {
  animation: blinker3 1s ease-in-out infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }

<div class=waitingForConnection>X</div>
<div class=waitingForConnection2>Y</div>
<div class=waitingForConnection3>Z</div>