Imitating a blink tag with CSS3 animations

Imitating a blink tag with CSS3 animations

I really want to make a piece of text blink the old-school style without using javascript or text-decoration.

No transitions, only *blink*, *blink*, *blink*!

Answer by m93a for Imitating a blink tag with CSS3 animations

Let me show you a little trick.

As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.

What you really need to do is this:

@keyframes blink {    50% {      opacity: 0.0;    }  }  @-webkit-keyframes blink {    50% {      opacity: 0.0;    }  }  .blink {    animation: blink 1s step-start 0s infinite;    -webkit-animation: blink 1s step-start 0s infinite;  }

Blink

JSfiddle Demo

Answer by Belyash for Imitating a blink tag with CSS3 animations

Try this CSS

@keyframes blink {        0% { color: red; }      100% { color: black; }  }  @-webkit-keyframes blink {      0% { color: red; }      100% { color: black; }  }  .blink {      -webkit-animation: blink 0.5s linear infinite;      -moz-animation: blink 0.5s linear infinite;      animation: blink 0.5s linear infinite;  }   

? You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.

Answer by Neil for Imitating a blink tag with CSS3 animations

The original Netscape had an 80% duty cycle. This comes pretty close, although the real 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 blinking text.

You can find more info about Keyframe Animations here.

Answer by airtonix for Imitating a blink tag with CSS3 animations

I'm going to hell for this :

=keyframes($name)    @-webkit-keyframes #{$name}      @content    @-moz-keyframes #{$name}      @content    @-ms-keyframes #{$name}      @content    @keyframes #{$name}      @content      +keyframes(blink)    25%      zoom: 1      opacity: 1      65%      opacity: 1       66%      opacity: 0      100%      opacity: 0    body    font-family: sans-serif    font-size: 4em    background: #222    text-align: center      .blink      color: rgba(#fff, 0.9)      +animation(blink 1s 0s reverse infinite)      +transform(translateZ(0))    .table    display: table    height: 5em    width: 100%    vertical-align: middle      .cell      display: table-cell      width: 100%      height: 100%      vertical-align: middle  

http://codepen.io/anon/pen/kaGxC (sass with bourbon)

Answer by S.B. for Imitating a blink tag with CSS3 animations

There's actually no need for visibility or opacity - you can simply use color, which has the upside of keeping any "blinking" to the text only:

blink {      display: inline;      color: inherit;      animation: blink 1s steps(1) infinite;      -webkit-animation: blink 1s steps(1) infinite;  }  @keyframes blink { 50% { color: transparent; } }  @-webkit-keyframes blink { 50% { color: transparent; } }

Here is some text, this text will blink, this will not.

Fiddle: http://jsfiddle.net/2r8JL/

Answer by Alexander Sofin for Imitating a blink tag with CSS3 animations

Another variation

.blink {      -webkit-animation: blink 1s step-end infinite;              animation: blink 1s step-end infinite;  }  @-webkit-keyframes blink { 50% { visibility: hidden; }}          @keyframes blink { 50% { visibility: hidden; }}

This is blink

Answer by Vishal Kiri for Imitating a blink tag with CSS3 animations

Please find below solution for your code.

@keyframes blink {    50% {      color: transparent;    }  }    .loader__dot {    animation: 1s blink infinite;  }    .loader__dot:nth-child(2) {    animation-delay: 250ms;  }    .loader__dot:nth-child(3) {      animation-delay: 500ms;  }  Loading ...  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72