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.

I've created a short example over here.

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;
}

Answer 2

One way to do it is to use the jQuery UI animate method, which extends the "normal" jQuery animate() to affect things like background-color.

Transitions like this is possible in css3 to, but obviously with not as wide browser support.

#maDiv {
   -webkit-transition:background-color 0.5s linear;
   -moz-transition: background-color 0.5s linear;
   -o-transition: background-color 0.5s linear;
   height: 20px;
   width: 20px;
   background:#000;
}

#maDiv:hover {
    background: #ff0;
}

That will fade the color when the user hovers the Div, and fade it back when mouse is out, over 0.5 seconds. For browser support details, see "css3 transition" here: http://www.html5rocks.com/en/features/presentation