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 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:
position: relative;
<a>
tag a height
, width
<span>
width
& height
to 100%, so that both <a>
and <span>
have same dimensions<a>
and <span>
get position: relative;
.<a>
tag will have the 'OFF' background-position
, and the <span>
will have the 'ON' background-poisiton
.<span>
:hover
state use opacity 1 for <span>
-webkit
or -moz
transition on the <span>
elementYou'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.
Source: Stackoverflow.com