JSFIDDLE

Question

这个非常简单的JSFiddle（http://jsfiddle.net/AndyMP/sj2Kn/）会在'hover'上更改块的背景颜色，但是如何让它变为fadein / fadeout？

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

Answer 1

Demo Fiddle

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

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

200ms是您希望淡入淡出的时间。

CSS属性transition定义您想要进行动画，以下三个部分是您要转换的特定属性（可以设置为all），速度和{ {3}}

animation timing function

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

Answer 2

您需要使用transition属性

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

Demo

属性很简单，您传递的第一个参数是您要设置动画的属性，因此您想要为height设置动画，您可以使用height，或者可以使用all如果要传输所有过渡属性的值，并且下一个参数是我们为过渡设置的时间，则可以设置为1s，2s，等等{{} 1}}代表秒。

值得注意的是，使用的物业是以下物业的简易物业

在上面的示例中，我们使用transition-delay: 0s transition-duration: 0s transition-property: background transition-timing-function: ease和transition-property，默认值用于其他属性。

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

使用CSS悬停时的fadein背景颜色

3 个答案:

Demo Fiddle

JSFIDDLE