How to create a “highlighting” effect in CSS3/Javascript?

Question

I have a span of text, which when clicked gets highlighted by changing its background color. I would like to animate the highlighting, so that the background color changes progressively from left to right, as if someone was actually highlighting the text. Any thoughts on how that would be achievable with CSS3 and/or Javascript/jQuery?

Answer 1

If you're okay with some CSS3-only features, you can use transitions, gradients and background-size :

.highlightable {
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s ease-out;
    -moz-transition: background-size 0.5s ease-out;
    -ms-transition: background-size 0.5s ease-out;
    -o-transition: background-size 0.5s ease-out;
    transition: background-size 0.5s ease-out;
}

.highlightable.highlight {
    background-image: -webkit-linear-gradient(yellow, yellow);
    background-image: -moz-linear-gradient(yellow, yellow);
    background-image: -ms-linear-gradient(yellow, yellow);
    background-image: -o-linear-gradient(yellow, yellow);
    background-image: linear-gradient(yellow, yellow);
    background-size: 100% 100%;
}​

Here's a demo.

Answer 2

Lots of JavaScript libraries make this pretty easy for example my favourite: YUI

Otherwise without a library I would set an array with hexadecimal intermediary colour values that you want you background to have at each time slice; and use the setTimeout() method to change the background colour several times in quick succession; eg

setTimeout("document.getElementById('mySpan').style.backgroundColor = myColors[i]; i++;", 50);