Imitating a blink tag with CSS3 animations

Question

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*!

This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions

[The best answer](http://stackoverflow.com/a/13955165/456814) I've found for this was unfortunately deleted by the original poster, @m93a, so it can't be upvoted yet. I think the answer should be un-deleted and upvoted, since it's the simplest solution that produces the best blink effect, and it works in [all current versions of major browsers](http://caniuse.com/#feat=css-animation). You can also read a short blog post on the same solution at [Emulating using WebKit CSS3 animation](http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation). — , Feb 18 '14 at 07:47
What I don't understand is why every single answer here seems to have the `@-webkit-keyframes` rule *after* the unprefixed `@keyframes` rule, and some even have the `-webkit-animation` declaration after the unprefixed one. — BoltClock, Apr 24 '14 at 04:01
@BoltClock: It's because CSS3 animations are relatively new and not yet stable in Webkit browsers. The so called "prefix" is here for developers that want to use animations even if they're unstable and not finished. — m93a, Apr 24 '14 at 04:57
@m93a: I know that, but I'm asking why they're placed after the unprefixed rule and not before it (apparently I didn't include that phrasing in my original comment, my mistake). — BoltClock, Apr 24 '14 at 04:57
@BoltClock it doesn't matter. Just the developers agree that the standard one is more important so it should be on the top. Nothing to do with rewriting, really. It just looks better :D — m93a, Apr 24 '14 at 04:59
Of course it does matter. The developers didn't agree that the standard one should be on the top - on the contrary, it should be at the bottom. See http://stackoverflow.com/questions/12528398/ordering-in-vendor-based-css3-vs-standard-css3-syntax and http://stackoverflow.com/questions/7080605/ordering-of-vendor-specific-css-declarations Unless there is a good reason to make an exception for `@-webkit-keyframes` which I'm missing seeing as that's how every answer here is doing it. — BoltClock, Apr 24 '14 at 05:01
_This discussion is getting a bit chatty_. I haven't seen any browser that supports both prefixed and standard syntaxes. So it ignores the first one xor the second one, still making no difference. — m93a, Apr 24 '14 at 05:10
If anyones looking for smooth blinker than I've wrote [an answer here](http://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css3/16344389#16344389) — Mr. Alien, Aug 25 '14 at 16:26
Possible duplicate of [How to make blinking/flashing text with css3?](http://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css3) — Brad Werth, May 08 '17 at 17:33

Neil · Accepted Answer · 2016-02-10T01:02:27.033

280

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.

You can find more info about Keyframe Animations here.

edited Feb 10 '16 at 01:02

answered Apr 15 '13 at 10:30

Neil

54,642
8
60
72

2

Yeah, it's much simpier. You can add webkit prefix to get it working in Chrome and Safari. – m93a Apr 15 '13 at 18:31
2

This might not work on Chrome/safari without the webkit prefixes. – David Pelaez Jan 20 '14 at 20:59
2

What I enjoy doing is, instead of making blink a class, making blink a tag (with `blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }`). That way, you can just use the `` tag, instead of `` =) – 416E64726577 Jul 08 '15 at 18:27
Note: This is only the OP's requested " imitation". Not usable with i.e. `color` property as an "on-off"-blink-animation. – Martin Schneider Feb 04 '18 at 12:51

m93a · Answer 2 · 2021-12-17T16:24:23.340

122

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;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
}

<span class="blink">Blink</span>

JSfiddle Demo

edited Dec 17 '21 at 16:24

answered Dec 19 '12 at 15:02

m93a

8,866
9
40
58

As written, this answer will indeed work in [current versions of Firefox, Chrome, Safari, and IE](http://caniuse.com/#feat=css-animation). – Feb 19 '14 at 10:23
1

@m93a: The `0% 100% { opacity: 1.0; }` sections seem to be superfluous, since they are default, no? – jamadagni Jan 02 '16 at 16:01
If you wanted to style the `blink` element itself, you could use the above (using `blink` instead of `.blink`) and add `display: block` to the CSS (I think it was a block element). Let's bring the evil back in! :-) – Claudia Jul 20 '16 at 03:24

Belyash · Answer 3 · 2016-06-13T12:10:33.430

51

Try this CSS

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

This is <span class="blink">blink</span>

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

edited Jun 13 '16 at 12:10

answered Dec 19 '12 at 15:14

Belyash

752
4
18

1

There's nothing like -ms-animation or -o-animation and -moz-animation was only in version 15, don't use it now. Look at caniuse.com to see actual support. Sorry but I won't accept this question :( PS: You can use 'edit' on other's answers. – m93a Dec 21 '12 at 14:10
It's just my old bad habit - add suffixes to all new CSS3 properties.. Updated answer. – Belyash Jul 30 '13 at 11:48
this is not "blink" but "blink-fadeOut". – Martin Schneider Feb 04 '18 at 12:33

score 35 · Answer 4 · edited Feb 06 '15 at 18:08

35

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, <blink>this text will blink</blink>, this will not.

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

edited Feb 06 '15 at 18:08

m93a

8,866
9
40
58

answered Apr 08 '14 at 14:35

S.B.

2,920
1
17
25

5

Wonderful! This is the only solution which provides text-only blinking. All other solutions blink the background of the element too. To test, use a `` with white on blue text against a `` with green background. Only in this solution, blue span background will not blink. – jamadagni Jan 02 '16 at 15:58
This solution is the best, because the text doesn't blink when selected. Good for acccessability. – pmiguelpinto90 Feb 11 '21 at 12:11
And an extra vote for steps(1). This reduces CPU load a lot when multiple items are blinking on the page. No steps in between need to be calculated. – Julesezaar Aug 05 '22 at 08:17

airtonix · Answer 5 · 2015-03-07T23:40:14.397

10

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)

edited Mar 07 '15 at 23:40

answered Aug 07 '13 at 07:16

airtonix

4,772
2
38
36

1

Your codepen generates a `Undefined mixin 'experimental'.` error, and thus it looks like it won't compile and display the blink animation. – Apr 04 '14 at 21:09
2

That's why he went to hell for it. – thms Jul 31 '21 at 12:27

score 6 · Answer 6 · answered Mar 01 '15 at 19:30

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 <span class="blink">blink</span>

score 4 · Answer 7 · answered Dec 11 '20 at 11:05

If you want smooth blinking text or something a like you can use following code:

 .blinking {
    -webkit-animation: 1s blink ease infinite;
    -moz-animation: 1s blink ease infinite;
    -ms-animation: 1s blink ease infinite;
    -o-animation: 1s blink ease infinite;
    animation: 1s blink ease infinite;
  }

  @keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-moz-keyframes blink {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-webkit-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-ms-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-o-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

<span class="blinking">I am smoothly blinking</span>

score 2 · Answer 8 · answered Sep 05 '16 at 09:17

2

It's working in my case blinking text at 1s interval.

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

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

answered Sep 05 '16 at 09:17

Ajay Kumar

4,864
1
41
44

score -3 · Answer 9 · answered Aug 15 '18 at 19:37

if you want some glow effect use this

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}

score -5 · Answer 10 · edited Dec 19 '17 at 04:45

-5

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 <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>

edited Dec 19 '17 at 04:45

Samuel Liew

76,741
107
159
260

answered Sep 02 '15 at 11:52

Vishal Kiri

1,248
1
12
24

Imitating a blink tag with CSS3 animations

10 Answers10

Linked

Related