How to Animate or Blink a Text in CSS

Blinking texts can capture user attention easily so you can use it for texts that needs more attention

To make a text blink in CSS, use the code below, you can customize it to change blink rate easily. First thing we need to do is give a class name to the text you want make blink then add that class in css with styling details. If you run a WordPress website, you can easily add this code in additional css

Here is the full CSS code to make a text blink

.blinker {
  animation: blinker 5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }

Blinker is the class name

Result :

This is a blinking text

This is the html of above text

<h3 class="blinker"><span style="color: #ff0000;">This is a blinking text</span></h3>