How can I pulse the glow effect in HTML

Hi all,

I would like some HTML text to have a glow effect; something like this:
<!doctype html>
<html>
<head>
<style>
h1 {
    text-shadow: 0 0 3px #FF0000;
    color: white;
}
</style>
</head>
<body>
<h1>Text-shadow with red neon glow</h1>
</body>
</html>

Open in new window

However, I would like either the glow or text color to fade between two colors, to bring this section to the operators attention.
I need to be able to use this code in IE11, Firefox and Chrome.
Any idea how I can achieve this?
Any help would be appreciated.
Many thanks,
James
LVL 4
James AtkinSenior Principle Software EngineerAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
0
 
Kyle HamiltonData ScientistCommented:
you can use js to add a class, and a timeout to remove the class. the fade effect can be achieved with a css transition.

Here is a fiddle. Click on the text:
http://jsfiddle.net/9j01fbsz/
0
 
James AtkinSenior Principle Software EngineerAuthor Commented:
That looks almost perfect!
How do I do this effect continuously without intervention from the user?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Kyle HamiltonData ScientistCommented:
you could do it on page load.. not sure that's what you want though - it would be pretty annoying. hold on, let me modify the script.
0
 
James AtkinSenior Principle Software EngineerAuthor Commented:
Perfect!!
Thanks so much for such a quick response :-)
0
 
Kyle HamiltonData ScientistCommented:
;)
0
All Courses

From novice to tech pro — start learning today.