animate colour by using css3 - css

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.

Answer 2

Of course, you can do it. You set a :hover color for the background and you don't forget to add the transition css property to the element :
CSS code :
.myElementToHover{
background: #c00;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease
}
.myElementToHover:hover{
background: #00c;
}
Generally speaking, when you want to use a CSS3 rule, Paul Irish (jquery) made a very usefull page : http://css3please.com/ Just use it, all the answers are here ! (except that you should now add the -ms- prefix).
With this code, you add a transition for every css property, but if you want to add a transition for only the backgroundColor, you replace 'all' by 'backgroundColor'.
0.5s is the duration of the animation. It can also be set in ms.
ease is the way the animation behave. Basic settings are :
linear
ease (default)
ease-in
ease-out
ease-in-out
But you can set your own transition :
cubic-bezier(0.215, 0.610, 0.355, 1.000)
Matthew Lein made a very nice page to help you make a custom easing settings : http://matthewlein.com/ceaser/