How to Blinking Text with CSS. In this tutorial, we will learn how to make a text as a blinker. Blinking Text in CSS is described as modifying the color of the text at the same time intervals.
Why do we need blinking text?
Blinking Text usually is used to obtain someone’s consideration to look at the link or blinking text. Blinking Text becomes true has been depreciated and no continued used by developers.
Read Also: Uses of box-sizing in CSS.
Blinking Text is used when renewing significant news on the website. Because it is human learning to look at the conditions which are growing continuously. So, by creating the text blink, it takes some attention very quickly.
Read Also: CSS Position Property.
How does Blinking Text work in CSS?
The text will be blinked based on the quality value assigned to it. Text Blinking point can be done by animation property and @keyframes selector.
selector{
animation: blinker time_in_seconds up_to_blink_time;
}
@keyframes blinker {
60% {
opacity: 0;
}
}Explanation:
- @keyframes: @keyframes selector presents the blinking text with opacity and colors.
- animation: Blinker makes text blink, time_in_seconds up makes text blink after every given time and up_to_blink_time makes how much time text has to blink.
Example:
<h2>How to Blinking Text with CSS</h2>
<div class="blink">Text is blinking <span class="text">softcodeon.com</span></div>
<style type="text/css">
.blink{
width:500px;
height: 60px;
background-color: cyan;
padding: 15px;
text-transform: uppercase;
font-size: 30px;
text-align: center;
}
.text{
font-size: 35px;
font-family: Arial;
color: #000;
animation: blinktext 2s linear infinite;
}
@keyframes blinktext{
0%{ color: hotpink; }
47%{ color: #000; }
62%{ color: transparent; }
97%{ color:transparent; }
100%{ color: #000; }
}
</style>That’s it.
Have a nice day.