Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I animate a glowing effect on text?

Tags:

I haven't really been able to find any good simple tutorials an animating a glow effect. How do I animate glowing on text?

like image 532
NullVoxPopuli Avatar asked Aug 15 '11 03:08

NullVoxPopuli


People also ask

How do you add a glow effect to text in CSS?

Text-shadow is what you have to use to achieve glow or some kind of text-shadow. To add multiple text-shadow , you can do that by separating them, by adding comma to text-shadow property.


1 Answers

If you want to just use CSS3, you don't even have to use any jQuery/JavaScript. Just do this in your CSS:

.confirm_selection {     -webkit-transition: text-shadow 0.2s linear;     -moz-transition: text-shadow 0.2s linear;     -ms-transition: text-shadow 0.2s linear;     -o-transition: text-shadow 0.2s linear;     transition: text-shadow 0.2s linear; } .confirm_selection:hover {     text-shadow: 0 0 10px red; /* replace with whatever color you want */ } 

Here's the fiddle: http://jsfiddle.net/zenjJ/

If you want the element to run on its own (without hovering), do this:

CSS:

.confirm_selection {     -webkit-transition: text-shadow 1s linear;     -moz-transition: text-shadow 1s linear;     -ms-transition: text-shadow 1s linear;     -o-transition: text-shadow 1s linear;     transition: text-shadow 1s linear; } .confirm_selection:hover, .confirm_selection.glow {     text-shadow: 0 0 10px red; } 

JavaScript:

var glow = $('.confirm_selection'); setInterval(function(){     glow.toggleClass('glow'); }, 1000); 

You can play around with the timing in the CSS/JavaScript to get the exact effect you're looking for.

And finally, here's the fiddle: http://jsfiddle.net/dH6LS/


Update Oct. 2013: being that all major browsers now support CSS animations, all you need is this:

.confirm_selection {      animation: glow .5s infinite alternate;  }    @keyframes glow {      to {          text-shadow: 0 0 10px red;      }  }    .confirm_selection {      font-family: sans-serif;      font-size: 36px;      font-weight: bold;  }
<span class="confirm_selection">  [ Confirm Selection ]  </span>

Here's the fiddle: http://jsfiddle.net/dH6LS/689/

Don't forget to include all the different vendor prefixes in production.

like image 51
Joseph Silber Avatar answered Oct 23 '22 20:10

Joseph Silber