How do I animate a glowing effect on text?

Question

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

Answer 1

You can do this with pure CSS3 transitions:

div.transition{
    text-decoration: none;  
    color: blue;  
    text-shadow: none;  
    -webkit-transition: 500ms linear 0s;  
    -moz-transition: 500ms linear 0s;  
    -o-transition: 500ms linear 0s;  
    transition: 500ms linear 0s;  
    outline: 0 none; 
    background-color:#000; 
    font-size:2em;
    width:300px;     
    height:100px; 
    padding:1em;
}

div.transition:hover {
    color: #fff;  
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
}

Example: http://jsfiddle.net/jasongennaro/z5jCB/1/

Note: Glowing text works best on a dark background.

Inspiration (and much of the code) from here: http://www.sitepoint.com/css3-glowing-link-effect/