Question

It will be possible to obtain animate colour just by using css3?

Here is the demo about the effect I would like to obtain demo.
The demo is using jquery.color.js.

$(document).ready(function() {
    $('.replace-bg-on-hover').hover(

    function() {
        $(this).animate({
            backgroundColor: "#333"
        }, 500);
        return false;
    }, function() {
        $(this).animate({
            backgroundColor: "#6CA2FF"
        }, 500);
        return false;
    });
});​

Answer 1

You can use css3 transitions for this. Here’s a quick example – demo

Code from my example:

HTML

<div class="box"></div>​

CSS

.box {
    width: 100px;
    height: 100px;
    background: #005ca1;
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

.box:hover {
    background: #000;
}

Edit: Added the rest of the prefixes.