How to imitate a blink tag with CSS3 animations?

Spread the love

Sometimes, we want to imitate a blink tag with CSS3 animations.

In this article, we’ll look at how to imitate a blink tag with CSS3 animations.

How to imitate a blink tag with CSS3 animations?

To imitate a blink tag with CSS3 animations, we use add the key frames for the blink effect.

For instance, we write

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

to add a span with the blink class.

Then we write

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

to select the blink class and set the animation property to animate the blink-animation.

We use infinite to make the animation run forever.

And each iteration runs for 1 second.

Next, we add the keyframes with

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

to hide the element at the end of the animation.

Conclusion

To imitate a blink tag with CSS3 animations, we use add the key frames for the blink effect.

Leave a Reply

Your email address will not be published. Required fields are marked *