使用 CSS 悬停时淡入背景颜色

Question

这个非常简单的JSFiddle(http://jsfiddle.net/AndyMP/sj2Kn/(在"悬停"时更改块的背景颜色，但是如何让它淡入/淡出？

.block {
    width: 200px;
    height: 200px;
    border: 1px solid #333;
}
.block:hover {
    background-color: #333;
}

Answer 1

你需要使用transition属性

.block {
    width: 200px;
    height: 200px;
    border: 1px solid #333;
    -webkit-transition: background .5s; /* For webkits */
    transition: background .5s;
}

演示

该属性很简单，您传递的第一个参数是要进行动画处理的属性，因此假设您要对可以传递height height进行动画处理，或者如果您想传输所有过渡属性，则可以使用 all 作为值，下一个参数是我们为过渡设置的时间， 您可以将 S 表示秒的位置设置为 1s 、2s等。

---

值得注意的是，我使用的属性是以下属性的简写属性

transition-delay: 0s
transition-duration: 0s
transition-property: background
transition-timing-function: ease

在上面的例子中，我们使用 transition-property 和 transition-duration ，默认值用于其他属性。

Answer 2

演示小提琴

将transition:background 200ms ease-in;添加到.block

.block {
    width: 200px;
    height: 200px;
    border: 1px solid #333;
    transition:background 200ms ease-in;
}

其中200ms是您希望淡入淡出所需的时间。

CSS 属性transition定义您希望发生动画，以下三个部分是要转换的特定属性(可以设置为 all(、速度和动画计时函数。

更多关于 MDN 的 CSS 过渡

CSS 过渡，这是 CSS3 规范集的一部分， 提供一种在更改 CSS 属性时控制动画速度的方法。 您可以不必让属性更改立即生效，而是可以 导致属性中的更改在一段时间内发生。 例如，如果将元素的颜色从白色更改为 黑色，通常变化是瞬间的。使用 CSS 过渡 启用后，更改发生在加速之后的时间间隔内 曲线，所有这些都可以定制。

Answer 3

JSFIDDLE

  .block {
        width: 200px;
        height: 200px;
        border: 1px solid #333;
        transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;;
        -webkit-transition: all 0.25s ease;
    }
    .block:hover {
        background-color: #333;
        transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;;
        -webkit-transition: all 0.25s ease;
    }