Propriété CSS3 Transition

Bonjour,

Je veux créer un effet de transition CSS3 avec transition. Tout ce passe très bien excepté quand je veux l'appliquer à des background.

li.next-page {
  height: 26px;
  width: 26px;
  background: url("image/next_page.png") no-repeat;
  text-indent: -7000px;
  }
	
     li.next-page:hover {
       background: url("image/next_page_hover.png") no-repeat;
       -webkit-transition: background 0.2s ease-out;
       transition: background 0.2s ease-out;
     }

D'où peut venir ce satané problème qui se présente sur tous les background de ma CSS ?

PS : J'ai volontairement retiré -o-transition et -moz-transition pour plus de clarté ici !
Modifié par Sls (31 Jan 2012 - 18:32)

Je dis peut-être une bêtise mais la transition tu ne dois pas le mettre sur le :hover !
Je n'ai pas testé mais essaie !

li.next-page {
height: 26px;
width: 26px;
background: url("image/next_page.png") no-repeat;
text-indent: -7000px;
-webkit-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;

}

li.next-page:hover {
background: url("image/next_page_hover.png") no-repeat;
}
Modifié par neelo (05 Feb 2012 - 19:40)

Bonjour,

À ma connaissance les navigateurs ne font pas d'effet de transition entre deux background-image. Quel traitement serait attendu? Une diminution progressive de l'opacité du premier background et une incrémentation de l'opacité du second? Difficile à réaliser pour un navigateur vu qu'un background-image n'a pas d'opacité propre.

Il y a plusieurs astuces pour obtenir le même effet en utilisant un pseudo-élément affiché en «fond» de l'élément et en jouant sur son opacité, ou encore en utilisant des couleurs RGBA. Dans tous les cas ça demande d'avoir deux éléments (ou un élément et un pseudo-élément), avec l'image final en fond de l'élément principal et l'image ou couleur de départ en fond de l'élément en surimpression. Voir un exemple parmi d'autres (on en trouvera sans doute de meilleurs avec une petite recherche).
Modifié par fvsch (06 Feb 2012 - 15:38)