How Can I Create a Blink Effect with CSS3 Without JavaScript or Transitions?

Blink Animation without Transitions using CSS3

Question:

Can text blink without the use of JavaScript or text decoration, mimicking the classic tag without continuous transitions?

Answer:

The tag in old browsers had an 80% duty cycle, meaning it was visible for 80% of the time and hidden for 20%. Here's a CSS solution that closely replicates this behavior, affecting only 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;
  }
}

Usage:

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

The above is the detailed content of How Can I Create a Blink Effect with CSS3 Without JavaScript or Transitions?. For more information, please follow other related articles on the PHP Chinese website!