使用CSS3淡出图像悬停淡出？

Question

我想知道是否有可能在图像上声明一个unhover课程？

我想要实现的是当有人在图像上盘旋它会淡入然后当它们解开时它会逐渐退去？

继承我的代码,当有人在图像上盘旋时,我得到了淡入效果,但是当他们卸下时我需要它也会淡出...希望这是有道理的.

http://jsfiddle.net/L7XCD/

Answer 1

这对你有用!http://jsfiddle.net/L7XCD/1/

让我们使用伟大的mozilla文档来解释这个:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

我们还使用了转换定时功能(简单,线性,易于操作,易于输出,易于输入)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

CCS标记:

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}?

由于他使用过渡轻松进入,我认为最好使用相同的过渡功能.

有关更多信息,请查看此处的文档

希望能帮助到你!