-1

The effect I am after is a highlight that triggers on page landing on a select piece of text. Let's target element id="highlight me". The highlight can glow twice around the targeted container and then disappears. It is best articulated visually: video demonstration here. A JavaScript solution is acceptable.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
       // Some javascript to make the animation.
    </script>
  </head>
  <body>
    <div id="highlight-me">A bit of text needing attention on page landing.</div>
  </body>
</html>

Maximum cross-browser support is important.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
ptrcao
  • 421
  • 1
  • 5
  • 19
  • 2
    Possible duplicate of [CSS3 transitions want to add a colour and fade it away](https://stackoverflow.com/questions/10072993/css3-transitions-want-to-add-a-colour-and-fade-it-away) – Andreas Jan 20 '18 at 06:32
  • It would have been a good solution *but* CSS3 is not fully supported in older browsers. I have edited the question to emphasize cross-browser compatibility. – ptrcao Jan 20 '18 at 06:34
  • 1
    @ptrcao Even IE10 supports CSS animations. See: https://caniuse.com/#search=animation – Nisarg Shah Jan 20 '18 at 06:37
  • Possible duplicate of [How to highlight text using javascript](https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) – marekful Jan 20 '18 at 06:45
  • Google gives 182+ results for "highlight text javascript site:stackoverflow.com". No comment... – marekful Jan 20 '18 at 06:47
  • I have genuinely looked. None of the mentioned solutions or about 15 others on Google do exactly what I asked... There are variations of it, which trigger on hover or user interaction, etc, but to trigger on page load and a solution which doesn't raise at least some browser support issues. Some solutions I have seen are incredibly labored and include numerous browser-specific provisions with no guarantee of support in older browsers. – ptrcao Jan 20 '18 at 06:48

1 Answers1

4

Try this easiest way.

#highlight-me {
  animation: glow 700ms 2;
  border-radius: 3px;
  display: inline-block;
  padding: 2px 5px;
}

@keyframes glow {
  50% {
    background: rgba(255,0,0,0.5);
    box-shadow: 0 0 10px red;
  }
}
<div id="highlight-me">A bit of text needing attention on page landing.</div>
Ruslan
  • 1,293
  • 17
  • 28
  • Thanks for your helpful reply Sam. If nobody comes up with a solution other than a keyframes-dependent one after a day, I will accept yours. The reason why I didn't accept numerous similar solutions I encountered in Google searches, was because of the lack of cross-browser standards implied in this answer(https://stackoverflow.com/questions/20217313/only-background-image-has-to-fade-in-on-page-load). Whenever this happens, the onus is on the coder to cover every case, and you can miss browsers. Otherwise a very good answer. – ptrcao Jan 20 '18 at 07:23