[html] How to make blinking/flashing text with CSS 3

Currently, I have this code:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with opacity: 1.0, then again fades out, appears again, and so on...

I would like it to fade out, and then "raise" from this fade back again to opacity: 1.0. Is that possible?

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

It works for me by using class=blink for the respective element(s)

Simple JS Code

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);

Alternatively if you do not want a gradual transition between show and hide (e.g. a blinking text cursor) you could use something like:

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

Every 1s .cursor will go from visible to hidden.

If CSS animation is not supported (e.g. in some versions of Safari) you can fallback to this simple JS interval:

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

This simple JavaScript is actually very fast and in many cases may even be a better default than the CSS. It's worth noting that it is lots of DOM calls that make JS animations slow (e.g. JQuery's $.animate()).

It also has the second advantage that if you add .cursor elements later, they will still animate at exactly the same time as other .cursors since the state is shared, this is impossible with CSS as far as I am aware.

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  _x000D_
  0% { opacity: 1.0; }_x000D_
  50% { opacity: 0.0; }_x000D_
  100% { opacity: 1.0; }_x000D_
}_x000D_
_x000D_
.blink {_x000D_
  width: 10px;_x000D_
  height: 10px;_x000D_
  border-radius: 10px;_x000D_
  animation: blinker 2s linear infinite;_x000D_
  background-color: red;_x000D_
  margin-right: 5px;_x000D_
}_x000D_
_x000D_
.content {_x000D_
  display: flex;_x000D_
  flex-direction: row;_x000D_
  align-items: center;_x000D_
}

<div class="content">_x000D_
  <i class="blink"></i>_x000D_
  LIVE_x000D_
</div>

The best way to get a pure "100% on, 100% off" blink, like the old <blink> is like this:

.blink {_x000D_
  animation: blinker 1s step-start infinite;_x000D_
}_x000D_
_x000D_
@keyframes blinker {_x000D_
  50% {_x000D_
    opacity: 0;_x000D_
  }_x000D_
}

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

Use the alternate value for animation-direction (and you don't need to add any keframes this way).

alternate

The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an ease-in animation is replaced with an ease-out animation when played in reverse. The count to determinate if it is an even or an odd iteration starts at one.

CSS:

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

I've removed the from keyframe. If it's missing, it gets generated from the value you've set for the animated property (opacity in this case) on the element, or if you haven't set it (and you haven't in this case), from the default value (which is 1 for opacity).

And please don't use just the WebKit version. Add the unprefixed one after it as well. If you just want to write less code, use the shorthand.

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

.waitingForConnection2 {
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }

.waitingForConnection3 {
  animation: blinker3 1s ease-in-out infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }

<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>

I don't know why but animating only the visibility property is not working on any browser.

What you can do is animate the opacity property in such a way that the browser doesn't have enough frames to fade in or out the text.

Example:

span {_x000D_
  opacity: 0;_x000D_
  animation: blinking 1s linear infinite;_x000D_
}_x000D_
_x000D_
@keyframes blinking {_x000D_
  from,_x000D_
  49.9% {_x000D_
    opacity: 0;_x000D_
  }_x000D_
  50%,_x000D_
  to {_x000D_
    opacity: 1;_x000D_
  }_x000D_
}

<span>I'm blinking text</span>

Change duration and opacity to suit.

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

.neon {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px yellow;
  animation: blinker 6s;
  animation-iteration-count: 1;
}
@keyframes blinker {
  0% {
    opacity: 0.2;
  }
  19% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 0.2;
  }
  23% {
    opacity: 0.2;
  }
  36% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  43% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

I used font-family: "Quicksand", sans-serif;

This is the import of the font (goes in the top of the style.css)

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

Late but wanted to add a new one with more keyframes ... here is an example on CodePen since there was an issue with the built-in code snippets:

.block{_x000D_
  display:inline-block;_x000D_
  padding:30px 50px;_x000D_
  background:#000;_x000D_
}_x000D_
.flash-me {_x000D_
  color:#fff;_x000D_
  font-size:40px;_x000D_
  -webkit-animation: flash linear 1.7s infinite;_x000D_
  animation: flash linear 1.7s infinite;_x000D_
}_x000D_
_x000D_
@-webkit-keyframes flash {_x000D_
  0% { opacity: 0; } _x000D_
  80% { opacity: 1; color:#fff; } _x000D_
  83% { opacity: 0; color:#fff; } _x000D_
  86% { opacity: 1; color:#fff;}  _x000D_
  89% { opacity: 0} _x000D_
  92% { opacity: 1; color:#fff;} _x000D_
  95% { opacity: 0; color:#fff;}_x000D_
  100% { opacity: 1; color:#fff;}_x000D_
}_x000D_
@keyframes flash {_x000D_
  0% { opacity: 0; } _x000D_
  80% { opacity: 1; color:#fff; } _x000D_
  83% { opacity: 0; color:#fff; } _x000D_
  86% { opacity: 1; color:#fff;}  _x000D_
  89% { opacity: 0} _x000D_
  92% { opacity: 1; color:#fff;} _x000D_
  95% { opacity: 0; color:#fff;}_x000D_
  100% { opacity: 1; color:#fff;}_x000D_
}

<span class="block">_x000D_
  <span class="flash-me">Flash Me Hard</span>_x000D_
</span>