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

I was wondering if it was possible to state an unhover class at all on an image?

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

What I am trying to achieve is when someone hovers over an image it will fade in and then when they unhover it fades back out?

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

Heres my code, I got the fade in to work when someone hovers over an image but I need it too fade out when they unhover... hope this made sense.

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

http://jsfiddle.net/L7XCD/

2 个解决方案

#1

This should work for you! http://jsfiddle.net/L7XCD/1/

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

Let's use the great mozilla documentation to explain this:

让我们使用伟大的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.

Transition提供了一种控制CSS属性动画更改速度的方法。您可以在指定的时间段内转换属性更改,而不是让动画更改立即生效。

Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)

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

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 markup:

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

Since he was using the transition ease-in-out, I thought it was better to use the same transition function.

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

For more information, check the documentation here

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

Hope it helps!

希望能帮助到你!

#2

http://jsfiddle.net/L7XCD/2/ Just add the transition effect to your element without the hover-tag

http://jsfiddle.net/L7XCD/2/只需在没有悬停标签的情况下为您的元素添加过渡效果

#1