HTML/CSS how to temporarily highlight a section of a page

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.

This seems relevant: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions . I guess I'll answer with a fiddle when I figure it out. — JDiMatteo, Aug 12 '16 at 02:31
Here is a fiddle showing basically what I ended up going with: https://jsfiddle.net/a0dhgw8n/ — JDiMatteo, Aug 13 '16 at 22:20
Why was this closed as a duplicate when the OP doesn't mention jQuery or even JavaScript for that matter? — StudioTime, Feb 14 '19 at 09:17

frnt · Answer 1 · 2016-08-12T03:44:49.790

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>

try adding keyframes rule with -moz- ..I can't see your animation working in my browser :D and just in case the OP have a mozilla browser — repzero, Aug 12 '16 at 03:34
@repzero added and yes in case if OP has mozilla browser. Now it works :-) — frnt, Aug 12 '16 at 03:46

score 2 · Answer 2 · edited May 01 '23 at 21:29

2

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/

edited May 01 '23 at 21:29

zcoop98

2,590
1
18
31

answered Aug 12 '16 at 02:55

OregonTrail

8,594
7
43
58

score 1 · Answer 3 · answered Aug 12 '16 at 02:47

This can be achieved with css3 animations..

see demo here

var answer=document.createElement('div');
answer.innerHTML='<div id="answer">\
 <h1>\
  My answer\
 </h1>\
</div>'
setTimeout(function(){document.body.appendChild(answer)},3000)

@keyframes animate {
  from {
    background: transparent
  }
  50% {
    background: #f2e68e;
  }
  100% {
    background: transparent;
  }
}

@-webkit-keyframes animate {
  from {
    background: transparent;
  }
  50% {
    background: #f2e68e;
  }
  100% {
    background: transparent;
  }
}
@-o-keyframes animate {
  from {
    background: transparent;
  }
  50% {
    background: #f2e68e;
  }
  100% {
    background: transparent;
  }
}

#answer {
  animation-name: animate;
  animation-duration: 3s;
  animation-iteration-count: 1;
  -moz-animation-name: animate;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: 1;
  -o-animation-name: animate;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: 1;  
  -webkit-animation-name: animate;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
}

<div>
Please wait I will inject this answer and hightlight it</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

This is called the yellow fade technique, there is already a question on SO for this: Yellow fade effect with JQuery and here is also some more info on this: https://signalvnoise.com/archives/000558.php To jump to a section and highlight it you can use :target More info on this here: https://css-tricks.com/on-target/

edited May 23 '17 at 11:44

Community

1
1

answered Aug 12 '16 at 02:57

Wim Mertens

1,780
3
20
31

HTML/CSS how to temporarily highlight a section of a page

4 Answers4