使用 CSS3 对颜色进行动画处理

Question

仅

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

Answer 1

你可以为此使用 css3 过渡。这是一个快速示例 - 演示

我示例中的代码：

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

编辑：添加了其余前缀。

Answer 2

当然，你可以做到。您为背景设置了：hover颜色，并且不要忘记将过渡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） 做了一个非常有用的页面： http://css3please.com/就用它吧，所有的答案都在这里！（除了您现在应该添加 -ms- 前缀）。

使用此代码，您可以为每个 css 属性添加一个过渡，但如果您只想为背景颜色添加过渡，请将"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制作了一个非常好的页面来帮助您进行自定义缓动设置：http://matthewlein.com/ceaser/