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?

Ry- · Accepted Answer · 2012-04-20 23:08:21Z

7

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.

answered Apr 20, 2012 at 23:08

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neil · Accepted Answer · 2012-04-20 23:08:56Z

0

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; e.g.

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

edited Apr 20, 2012 at 23:08

Neil

55.5k8 gold badges65 silver badges74 bronze badges

answered Apr 20, 2012 at 22:55

Reece

31 bronze badge

1 Comment

Ry- Over a year ago

Also, never, ever pass a string to setTimeout.

Collectives™ on Stack Overflow

How to create a "highlighting" effect in CSS3/Javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related