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.
