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.