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

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

Thank!

Answer 1

You cannot switch between two background images since the browser does not know what you want to interpolate. As you have discovered, you can go to the starting position. If you want the image to fade on hover, I think the best way to do this with CSS transitions is to place the image on the containing element and then animate the background color to transparent by 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 scroll effect is the cause by setting the generic "background" property in your css instead of a more specific background image. By setting the background property, the animation will switch between all the properties. Background color, Background image, Background position, etc. Thus, the scroll effect.

eg.

 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

Perhaps use the following structure:

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

etc...

Where <li> contains the anchor tag <a> , which contains the range as shown above. Then paste the following css:

• LI get position: relative;
• Give <a> tag a height , width
• Set <span> width and height to 100% so that both <a> and <span> are the same size
• Both <a> and <span> get position: relative; .
• Assign the same background image to each element Tag
• <a> will have "OFF" background-position , and <span> will have 'ON' background-poisiton .
• For the OFF state, use opacity 0 for <span>
• For 'ON' :hover state opacity 1 is used for <span>
• Set the -webkit or -moz transition to the <span> element

You will have the opportunity to use the transition effect, but still does not perform the old background-position swap. Remember to insert the IE alpha filter.