Imitating a blink tag with CSS3 animations

html

css3-animations

responsive-design

performance

byAnton Shumikhin·Jan 23, 2025

Simulate the blink effect using CSS3 by adjusting element visibility with @keyframes. Set the opacity from 1 to 0 for an authentic blink. Use the below mentioned code:

@keyframes blink {
  0%, 100% { opacity: 1; } /* Visible */
  50% { opacity: 0; }      /* Invisible - blink! */
}

.blink-text {
  animation: blink 1s step-end infinite; /* Blink, blink, blink till eternity */
}

Attach .blink-text to the desired elements to enable blinking:

<span class="blink-text">Now you see me, now you don't!</span>

That's it! You now have a non-distracting text with a steady blink every second.

##Unlock your full potential with CSS

Slow-fast, you control the blink speed

You're in the driving seat when it comes to controlling the speed of blinking. Fiddle with the animation-duration and see how it changes blink speed:

.fast-blink {
  animation-duration: 0.5s; /* You gotta be Flash to catch this */
}

.slow-blink {
  animation-duration: 2s; /* Even a snail can follow along */
}

Cross-browser compatibility: We've got you covered!

Use vendor prefixes, because browser compatibility is no joke:

@-webkit-keyframes blink {
  /* Keyframe rules, working as charm */
}

.blink-text {
  -webkit-animation: blink 1s step-end infinite; /* Safari & old Chrome */
 animation: blink 1s step-end infinite;         /* Standard syntax */
}

Better performance, because who doesn't like a speedy website?

.blink-text {
  transform: translateZ(0); /* Doesn't actually move the element, but hey, better performance! */
}

A splash of color to make things interesting

Add some hankey-pankey with colors for blinking:

.color-blink {
  animation: colorChangeBlink 1s step-end infinite;
}

/* Colorful blink */
@keyframes colorChangeBlink {
  0%, 100% { color: blue; }    /* Blue all the way */
  50% { color: transparent; } /* Invisible for a while */
}

Don't be a block, be inline

Preserve the inline character of your text with display:

.blink-inline {
  display: inline; /* Stay in line, mate! */
  animation: blink 1s step-end infinite;
}

Sass: Make your CSS do more with less

If you're more advanced, take this opportunity to introduce yourself to Sass. It's nice for managing complex styles and animation can be easily encapsulated with mixins:

@mixin blink-animation($duration) {
  animation: blink $duration step-end infinite;
}

.blink-text {
  /* I never thought a mixin for blinking could be so sassy! */
  @include blink-animation(1s);
}