CSS3 Fade Effect

Question

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?

Thanks!

Answer 1

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:

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

Answer 2

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..

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

Answer 3

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 get position: relative;
• Give <a> tag a height, width
• Set <span> width & height to 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' :hover state use opacity 1 for <span>
• Set the -webkit or -moz transition on the <span> element

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