Imitating a Blink Tag With Css3 Animations

Imitating a blink tag with CSS3 animations

The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:

.blink {  animation: blink-animation 1s steps(5, start) infinite;  -webkit-animation: blink-animation 1s steps(5, start) infinite;}@keyframes blink-animation {  to {    visibility: hidden;  }}@-webkit-keyframes blink-animation {  to {    visibility: hidden;  }}

This is <span class="blink">blinking</span> text.

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>

Alternate blinking with CSS3 animation

The key to alternating blinking lies in setting up the animation-delay value to half of the "1s" in animation: blink-animation 1s steps(5, start) infinite to "0.5s".

I'm not sure what a generalized formula would look like, but for this purpose "0.5s" seems to work.

I tested this by letting it run for 10 minutes, and still remained blinking in alternation.

So .blinky2 now looks like this:

.blinky2 {
  /* Need make this alternate blinking*/
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;

  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  font-size: x-large;
  color: red;
  display: inline;
}

HTML how to increase blink tag blinking timing

The HTML 'blink' tag is obsolete. Moreover The blink() method is not standard, and may not work as expected in all browsers. You can use JavaScript for your requirement.

function blink() {  setInterval(function() {    document.getElementById("blink").style.webkitTransitionDuration = "0.5s";    document.getElementById("blink").style.opacity = 0;    setTimeout(function() {      document.getElementById("blink").style.webkitTransitionDuration = "0.5s";      document.getElementById("blink").style.opacity = 1;    }, 500);  }, 1500);}blink();

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"><div id="blink"><i class="fa fa-phone"></i>+01 0000 111 111</div>

Alternative for blink

No there is not. Wikipedia has a nice article about this and provides an alternative using JavaScript and CSS: http://en.wikipedia.org/wiki/Blink_element

How to make flashing text in Css?

Yes!
You can use CSS3 animations to handle that now.

HTML:

 <h1 class="flash">Look at me flash</h1>

CSS:

.flash {
   animation-name: flash;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes flash {
    from {color: red;}
    to {color: black;}
}

Here's a link to a codepen to see it in action.

css3 animations hard blink (no fade inbetween frames)

Use proper animation-timing-function:

http://jsfiddle.net/rfGDD/1/ (WebKit only)

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal; /* not "linear" */
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(3, end);
}

MDN document on fill-mode

MDN document on direction

MDN document on steps() timing function

Edit:

Oops, just realized the logical flaw.

Revised: http://jsfiddle.net/rfGDD/3/ (WebKit only)

In addition to the above change, change the flash animation to following:

@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

The problem is, the animation plays 3 seconds, but each element need to stay in the opacity:0 state after second #1, so I need to split the animation into 2 stages (with the timing length ratio 1:2), so elements can look like they stays in final stage for 2 seconds.

Blink a text inside div twice using css

#text {  font-weight: bold;  font-size: 20px;  animation-name: blink;  animation-duration: 5s;   animation-iteration-count: infinite;}
@keyframes blink {    0% {color: pink}    50% {color: black;}    100% {color: pink;}    }

<div id="text">  No more lights</div>

Blinking text cross browser

This can be achieved with CSS3 like so

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

It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.

Imitating a Blink Tag With Css3 Animations