blink only div not inner html

Asked Mar 13 '22 at 18:53

Active Mar 13 '22 at 19:21

Viewed 17 times

Blinking only div not the inner html / text in pure CSS

Below code blinks everything:

.blinking {
  animation: opacity 2s ease-in-out infinite;
  opacity: 1;
}

.blue {
  background-color: #0092dc;
}

.red {
  background-color: red;
  width: 30%;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

<div class="blinking blue">Researching...
  <div class="red">hi</div>
</div>

Blinking only div not the inner html / text in pure CSS

asked Mar 13 '22 at 18:53

soji

Do you want the animation to affect only the background, but not the text? – s.kuznetsov Mar 13 '22 at 19:05
yes, only the background (blue color), any text or red color background should **not** animate / blink. @s.kuznetsov – soji Mar 13 '22 at 19:08

blink only div not inner html

0 Answers0