CSS3 transitions want to add a colour and fade it away

Question

I want to make a DIV background (which doesn't have a background color) flash red then ease out to blank again. now I have used JS to add a new CLASS (which adds the red) to the DIV in question and CSS3 to add an easing to the background color. but it eases it IN, what I want is it to go RED then ease out. I guess I could do this by using JS to add multiple CLasss after a delay. but can CSS3 be used to do this entirely?

Answer 1

If you want something like a highlighting you may want to use CSS3 animations. They are not supported in older browsers. Check caniuse for this.

The highlight is called on clicking the link. Here is the CSS (without vendor-prefixes):

@keyframes highlight {     0% {         background: red     }     100% {         background: none;     } }  #highlight:target {     animation: highlight 1s; }

<div id="highlight"><a href="#highlight">Highlight</a></div>