Blink a text inside div twice using css

Question

How can i blink a text twice every 5 second using css

i have a div

<div class="blink">text</div>

I want to blink this text twice every 5 second using css

how can i achieve this?

i tried this

how to make CSS animation to play every 10 seconds

but not working in ie

i want this to work in ie and chrome

Temani Afif · Answer 1 · 2020-03-14T18:07:39.097

5

Use animation and adjust the properties like below:

.blink {
  color:black;
  font-size:30px;
  font-weight:bold;
  animation:blink 2.5s linear infinite alternate 2.5s;

}

@keyframes blink {
  80% {
    color:black;
  }
  90% {
    color:red;
  }
  100% {
    color:black;
  }
}

<div class="blink">This text will blink twice every 5 seconds</div>

edited Mar 14 '20 at 18:07

answered Feb 16 '18 at 11:58

Temani Afif

245,468
26
309
415

score 4 · Accepted Answer · answered Feb 16 '18 at 13:12

#text {
  font-weight: bold;
  font-size: 20px;
  animation-name: blink;
  animation-duration: 5s;
   animation-iteration-count: infinite;
}

@keyframes blink {
    0% {color: pink}
    50% {color: black;}
    100% {color: pink;}
    }

<div id="text">
  No more lights
</div>

You can see CSS3 animation examples / attributes in here : https://www.w3schools.com/css/css3_animations.asp

Also another StackOverFlow post is here: https://stackoverflow.com/a/16012979/3366361

Blink a text inside div twice using css

2 Answers2