CSS CSS3 淡入淡出效果

CSS3 Fade Effect

提问by eozzy

a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

.. currently it has scroll up/down effect, but I want the background to change with fade effect, what should I change in the CSS?

..目前它有向上/向下滚动效果，但我希望背景随着淡入淡出效果而改变，我应该在CSS中改变什么？

Thanks!

谢谢！

回答by robertc

You can't transition between two background images, as there's no way for the browser to know what you want to interpolate. As you've discovered, you can transition the background position. If you want the image to fade in on mouse over, I think the best way to do it with CSS transitions is to put the image on a containing element and then animate the background colour to transparent on the link itself:

您无法在两个背景图像之间转换，因为浏览器无法知道您要插入的内容。正如您所发现的，您可以转换背景位置。如果您希望图像在鼠标悬停时淡入，我认为使用 CSS 过渡的最佳方法是将图像放在包含元素上，然后将背景颜色动画化为链接本身的透明：

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}

回答by MJG

The scrolling effect is cause by specifying the generic 'background' property in your css instead of the more specific background-image. By setting the background property, the animation will transition between all properties.. Background-Color, Background-Image, Background-Position.. Etc Thus causing the scrolling effect..

滚动效果是通过在 css 中指定通用的“背景”属性而不是更具体的背景图像引起的。通过设置背景属性，动画将在所有属性之间进行过渡.. Background-Color, Background-Image, Background-Position.. 等等从而导致滚动效果..

E.g.

例如

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}

回答by Tony

It's possible, use the structure below:

有可能，请使用以下结构：

<li><a><span></span></a></li>
<li><a><span></span></a></li>

etc...

等等...

Where the <li>contains an <a>anchor tag that contains a span as shown above. Then insert the following css:

其中<li>包含一个<a>锚标记，其中包含一个如上所示的跨度。然后插入以下css：

• LI get position: relative;
• Give <a>tag a height, width
• Set <span>width& heightto 100%, so that both <a>and <span>have same dimensions
• Both <a>and <span>get position: relative;.
• Assign the same background image to each element
• <a>tag will have the 'OFF' background-position, and the <span>will have the 'ON' background-poisiton.
• For 'OFF' state use opacity 0 for <span>
• For 'ON' :hoverstate use opacity 1 for <span>
• Set the -webkitor -moztransition on the <span>element

• 李得到 position: relative;
• 给<a>标签一个height，width
• 将<span>width&设置height为 100%，以便<a>和<span>具有相同的尺寸
• 无论<a>和<span>获得position: relative;。
• 为每个元素分配相同的背景图像
• <a>标签将具有 'OFF' background-position，并且<span>将具有 'ON' background-poisiton。
• 对于“关闭”状态，使用不透明度 0 表示 <span>
• 对于 'ON':hover状态，使用不透明度 1<span>
• 在元素上设置-webkit或-moz过渡<span>

You'll have the ability to use the transition effect while still defaulting to the old background-positionswap. Don't forget to insert IE alpha filter.

您将能够使用过渡效果，同时仍默认为旧background-position交换。不要忘记插入 IE alpha 过滤器。