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!

score 25 · Accepted Answer · answered Jun 26 '10 at 19:07

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

Here is a list of properties that can be transitioned: http://www.w3.org/TR/css3-transitions/#properties-from-css- — crispy, Aug 23 '11 at 12:10

score 4 · Answer 2 · edited Nov 17 '14 at 14:43

4

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

edited Nov 17 '14 at 14:43

Rohit Suthar

3,528
1
42
48

answered Feb 11 '11 at 00:23

MJG

41
1

Great tip! I am doing the animation on a background image that has 'cover' attribute applied to it. Strange shrink effect is showing up as image is resized into the div. Probably more to do with the original dimensions of the image being 'animated' into a 'cover' final state. – Ryan Coolwebs Oct 16 '15 at 02:06

score 3 · Answer 3 · edited Jan 07 '16 at 11:12

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  width & height to 100%, so that both <a> and  have same dimensions
Both <a> and  get position: relative;.
Assign the same background image to each element
<a> tag will have the 'OFF' background-position, and the  will have the 'ON' background-poisiton.
For 'OFF' state use opacity 0 for 
For 'ON' :hover state use opacity 1 for 
Set the -webkit or -moz transition on the  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.

CSS3 Fade Effect

3 Answers3

Linked