用css3淡入/淡出 [英] fade in/out with css3

问题描述

可能重复：

缩略图淡出淡出

我是curios if可以实现此效果（只有淡入/淡出）

I'm curios if it's possible to achieve this effect ( only the fade in/out )

与css3。
我有一个类似的缩略图滚动，我想创建没有javascript的效果，或者如果这是不可能的，你能帮助我一个简单的解决方案用jquery创建这个吗？
谢谢！

with css3. I have a similar thumbnails scroller and I want to create that effect without javascript, or if this is not possible could you help me with a simple solution for creating this with jquery ? Thanks!

推荐答案

是的，可以使用CSS3转换。

Yes this is possible with CSS3 transitions.

示例： http://jsfiddle.net/fgasU/

代码：

<img src="photo.jpg"/>​

img{-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


img:hover{opacity:0}​

这个简单的例子将改变悬停时的不透明度。因为css转换是为'all'属性定义的，并且它们被赋予1秒的转换，具有一个缓入缓动函数，所以属性改变是动画的。

This simple example will change the opacity on hover. Because a css transition is defined for 'all' properties, and they are given a 1 second transition with an ease-in-out easing function, the property change is animated.

另外，因为它是一个新属性，所以转换属性必须在适用的浏览器实现之前。 -webkit for chrome / safari，-moz for firefox / mozilla，-o opera，-ms microsoft。

Also, because it is a new property, the transition property must be preceded by the applicable brower's implementation. -webkit for chrome/safari, -moz for firefox/mozilla, -o opera, -ms microsoft.

这篇关于用css3淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！