使用css3设置颜色动画

仅使用css3就可以获得动画颜色

这是我想要获得的效果的演示。
演示使用的是

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

---

您可以为此使用css3转换。这里有一个简单的例子-

来自我的示例的代码：

HTML

---

编辑：添加其余前缀

当然，你能做到。为背景设置：悬停颜色，并且不要忘记将transition css属性添加到元素：

CSS代码：

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

一般来说，当您想要使用CSS3规则时，Paul Irish（jquery）制作了一个非常有用的页面：只要使用它，所有答案都在这里！（除了现在应该添加-ms-前缀）

使用这段代码，您可以为每个css属性添加一个转换，但是如果您只想为backgroundColor添加一个转换，您可以将“all”替换为“backgroundColor”

0.5s是动画的持续时间。它也可以设置为毫秒

“轻松”是动画的行为方式。基本设置包括：

linear
ease (default)
ease-in
ease-out
ease-in-out

但您可以设置自己的转换：

cubic-bezier(0.215, 0.610, 0.355, 1.000)

---

Matthew Lein制作了一个非常好的页面来帮助您进行自定义宽松设置：

可能有人会因此杀了我，但这里有一些东西可以让您开始：如果您这样做，您的转换将只适用于webkit broswers（即safari和chrome）；查看我的答案，获取所有要添加的前缀。这是正确的。我以webkit为例，但当然应该添加其余前缀。

linear
ease (default)
ease-in
ease-out
ease-in-out

cubic-bezier(0.215, 0.610, 0.355, 1.000)