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

User · Accepted Answer

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

User · Answer

It s possible  use the structure below    lt li gt  lt a gt  lt span gt  lt  span gt  lt  a gt  lt  li gt   lt li gt  lt a gt  lt span gt  lt  span gt  lt  a gt  lt  li gt    etc     Where the  lt li gt  contains an  lt a gt  anchor tag that contains a span as shown above  Then insert the following css    LI get position  relative  Give  lt a gt  tag a height  width Set  lt span gt  width  amp  height to 100   so that both  lt a gt  and  lt span gt  have same dimensions Both  lt a gt  and  lt span gt  get position  relative   Assign the same background image to each element  lt a gt  tag will have the  OFF  background-position  and the  lt span gt  will have the  ON  background-poisiton  For  OFF  state use opacity 0 for  lt span gt  For  ON   hover state use opacity 1 for  lt span gt  Set the -webkit or -moz transition on the  lt span gt  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

User · Answer

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

[css] CSS3 Fade Effect

Examples related to css

Examples related to fade

Examples related to css-transitions