[css] CSS3 Fade Effect

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!

This question is related to css fade css-transitions

The answer is


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

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.