jQuery + RGBA color animations

Question

Does anyone know if jQuery can handle an animation like:

rgba(0,0,0,0.2) → rgba(0,255,0,0.4)

I know there is a plugin to handle color animations, but this might be too modern?

Answer 1

Using CSS3 animation (no javascript)

You can also achieve the same effect using CSS3 animation. See below,

Step 1: Create a keyframe for your animation

@keyframes color_up {
    from {
        background-color: rgba(0,0,0,0.2);
    }
    to {
        background-color: rgba(0,255,0,0.4);
    }
}

Step 2: Use the animation rules.

  animation-name: color_up;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;

DEMO: http://jsfiddle.net/2Dbrj/3/

Using jQuery

jQuery now supports color animation with RGBA support as well. This actually animates from one color to other.

$(selector).animate({
  backgroundColor: 'rgba(0,255,0,0.4)'
});

DEMO: http://jsfiddle.net/2Dbrj/2/