How to Create a Blinking Effect with CSS3 Animations

Often, the blinking effect is used to bring the users to the attention of some text on your website. If you need such an effect, try using CSS animations.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solutions with CSS animations

CSS3 allows creating animation without any Javascript code. To have a blinking text effect, you also need the @keyframes rule. We use CSS animation by defining some keyframes for our blinking text animation and set the visibility to "hidden". In our example below, we also add the -webkit- extension to the animation property for more browser compatibility.

Example of creating a blinking text effect with CSS3 animations:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .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;
        }
      }
    </style>
  </head>
  <body>
    Here is a <span class="blink">blinking</span> text.
  </body>
</html>

Result

Here is a blinking text.

Let’s see another example, where we have a blinking text in a <span> element within a <div> box and apply some style to the box as well. In this example, we set an animation time of 2 seconds.

Example of adding a blinking text effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blink {
        width: 220px;
        height: 50px;
        background-color: #342ab8;
        padding: 10px;
        text-align: center;
        line-height: 50px;
      }
      span {
        font-size: 26px;
        font-family: cursive;
        color: #fff;
        animation: blink 2s linear infinite;
      }
      @keyframes blink {
        0% {
          opacity: 0;
        }
        50% {
          opacity: .5;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="blink">
      <span>blinking text</span>
    </div>
  </body>
</html>

It is also possible to have a blinking background with CSS3 animations. Here also we create a set of keyframes and then specify the background-color at the starting and ending points.

Example of creating a blinking background:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes blinking {
        0% {
          background-color: #06c3d1;
          border: 3px solid #666;
        }
        100% {
          background-color: #270da6;
          border: 3px solid #666;
        }
      }
      #blink {
        width: 200px;
        height: 200px;
        animation: blinking 1s infinite;
      }
    </style>
  </head>
  <body>
    <div id="blink"></div>
  </body>
</html>