HTML/CSS how to temporarily highlight a section of a page [duplicate]

Question

For example, if you go to this link it flashes the answer temporarily.

How is this implemented?

Is this some bootstrap/css thing?

I tried googling, but I don't know what this flashing highlight functionality is called.

Answer 1

This can be implemented with JavaScript.

var bgopacity = 1.0

var bgfade = function() {
  var comment = document.getElementById("comment");
  bgopacity -= 0.02
  comment.style.backgroundColor = "rgba(255, 242, 130, " + bgopacity + ")";
  if (bgopacity >= 0) {
    setTimeout(bgfade, 30);
  }
}

bgfade();

https://jsfiddle.net/Lpo92shj/

Answer 2

You could achieve that using css animation, try as below,

div{
  width:100%;
  height:auto;
  animation:bg 2s ease-in;
  -webkit-animation:bg 2s ease-in;
  -moz-animation:bg 2s ease-in;
  -ms-animation:bg 2s ease-in;
  -o-animation:bg 2s ease-in;
}

@-webkit-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

@-moz-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

@-ms-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

@-o-keyframes bg{
  0%{
    background:rgba(255,165,0,1);
  }  
  20%{
        background:rgba(255,165,0,0.8);
  }
  50% 70%{
        background:rgba(255,165,0,0.5);
  }
  100%{
    background:rgba(255,165,0,0);
  }
}

<div>
<p>
Dummy Content Dummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy ContentDummy Content
</p>
</div>