170

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

9
  • 1
    The best answer 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. You can also read a short blog post on the same solution at Emulating <blink> using WebKit CSS3 animation.
    – user456814
    Feb 18, 2014 at 7: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, 2014 at 4: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, 2014 at 4: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, 2014 at 4:57
  • 1
    Possible duplicate of How to make blinking/flashing text with css3?
    – Brad Werth
    May 8, 2017 at 17:33

10 Answers 10

281

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.

4
  • 2
    Yeah, it's much simpier. You can add webkit prefix to get it working in Chrome and Safari.
    – m93a
    Apr 15, 2013 at 18:31
  • 2
    This might not work on Chrome/safari without the webkit prefixes. Jan 20, 2014 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 <blink> tag, instead of <span class="blink"> =) Jul 8, 2015 at 18:27
  • Note: This is only the OP's requested "<blink> imitation". Not usable with i.e. color property as an "on-off"-blink-animation. Feb 4, 2018 at 12:51
122
+50

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

3
  • As written, this answer will indeed work in current versions of Firefox, Chrome, Safari, and IE.
    – user456814
    Feb 19, 2014 at 10:23
  • 1
    @m93a: The 0% 100% { opacity: 1.0; } sections seem to be superfluous, since they are default, no?
    – jamadagni
    Jan 2, 2016 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, 2016 at 3:24
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/.

3
  • 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, 2012 at 14:10
  • It's just my old bad habit - add suffixes to all new CSS3 properties.. Updated answer.
    – Belyash
    Jul 30, 2013 at 11:48
  • this is not "blink" but "blink-fadeOut". Feb 4, 2018 at 12:33
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/

3
  • 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 <span> with white on blue text against a <body> with green background. Only in this solution, blue span background will not blink.
    – jamadagni
    Jan 2, 2016 at 15:58
  • This solution is the best, because the text doesn't blink when selected. Good for acccessability. Feb 11, 2021 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 5, 2022 at 8:17
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)

2
  • 1
    Your codepen generates a Undefined mixin 'experimental'. error, and thus it looks like it won't compile and display the blink animation.
    – user456814
    Apr 4, 2014 at 21:09
  • 2
    That's why he went to hell for it.
    – thms
    Jul 31, 2021 at 12:27
6

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>

4

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>

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; }
}
-3

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;
}
-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>

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.