153 votes

Transition de l'image d'arrière-plan en CSS3

J'essaie de créer un effet de "fade-in fade-out" en utilisant la transition CSS. Mais je n'arrive pas à le faire fonctionner avec l'image de fond...

Le CSS :

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

Jetez un coup d'œil : http://jsfiddle.net/AK3La/

117voto

Hengjie Points 1520

Vous pouvez faire la transition background-image . Utilisez le CSS ci-dessous sur le img élément :

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

Cette fonction est prise en charge de manière native par Chrome, Opera et Safari. Firefox ne l'a pas encore implémenté ( bugzil.la ). Je ne suis pas sûr pour IE.

159 votes

background-image n'est pas une propriété animable ( w3.org/TR/css3-transitions/#animatable-properties ), votre solution n'est donc pas conforme à la norme.

16 votes

Ce n'est pas une solution - FF et IE ne le supportent pas, et comme indiqué ci-dessus, ce n'est pas une propriété que la spécification dit devoir être supportée.

0 votes

Voir également pour l'évolution actuelle de Fx : bugzilla.mozilla.org/show_bug.cgi?id=546052

37voto

Ruffo Points 167

La solution (que j'ai trouvée par moi-même) est un truc de ninja, je peux vous proposer deux façons :

Vous devez d'abord créer un "conteneur" pour l'interface utilisateur. <img> il contiendra normal y survol en même temps :

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>
  • avec CSS3 sélectionneurs http://jsfiddle.net/eD2zL/1/ (si vous utilisez celle-ci, l'état "normal" sera le premier enfant de votre conteneur, ou bien changez le paramètre nth-child() commande)

  • CSS2 solution http://jsfiddle.net/eD2zL/2/ (les différences entre ne sont que quelques sélecteurs)

En gros, vous devez masquer l'état "normal" et afficher leur "survol" lorsque vous le survoler

et c'est tout, j'espère que quelqu'un trouvera cela utile.

0 votes

Bonne solution. En expérimentant avec le premier échantillon, j'ai remarqué que si vous augmentez la durée de la transition à 4s, vous pouvez voir un saut très notable lorsque le z-index change au milieu de la transition. Au moins sur Chrome 35, vous pouvez décaler le moment du changement de z-index et nettoyer la transition en changeant la valeur de la propriété en "all 4s ease, z-index 1ms" ( jsfiddle.net/eD2zL/330 ).

2 votes

@NealS. vous avez raison. Cette réponse date de 2 ans cependant, je supprimerais le z-index, il semble inutile. Les images ont juste besoin d'être dans l'ordre.

0 votes

Merci beaucoup. Votre solution est très utile pour moi.

21voto

Olwaro Points 107

Malheureusement, vous ne pouvez pas utiliser la transition sur background-image , voir le liste w3c des propriétés animables .

Vous pouvez faire quelques tours avec background-position .

17voto

J'ai trouvé une solution qui a fonctionné pour moi...

Si vous avez un élément de liste (ou div) contenant uniquement le lien, et disons que c'est pour les liens sociaux sur votre page vers facebook, twitter, etc. et que vous utilisez une image sprite, vous pouvez le faire :

<li id="facebook"><a href="facebook.com"></a></li>

Faites de l'arrière-plan des "li" l'image de votre bouton.

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

Ensuite, l'image d'arrière-plan du lien devient l'état de survol du bouton. Ajoutez également l'attribut d'opacité à ce bouton et fixez-le à 0.

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

Maintenant, tout ce dont vous avez besoin est "opacité" sous "a:hover" et définissez-le à 1.

#facebook a:hover {
   opacity:1;
}

Ajoutez les attributs de transition d'opacité pour chaque navigateur à "a" et "a:hover" afin que le css final ressemble à ceci :

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

Si je l'ai expliqué correctement, cela devrait vous permettre d'avoir un bouton d'image de fond qui s'estompe, j'espère que cela vous aidera au moins !

4 votes

J'ai également réalisé une version tutoriel vidéo. youtube.com/watch?v=6ieR5ApVpr0

0 votes

Il n'est pas nécessaire, à priori, de spécifier les transitions sur la pseudo-classe de survol ; la définition de la transition pour le type de balise d'ancrage sera reportée sur le comportement de survol, il suffit de modifier l'opacité. Gardez à l'esprit que cet exemple fonctionne bien parce que les styles sont appliqués directement aux IDs/types de balises ; si vous faites cela avec des classes, vous devez vous assurer que vous n'ajoutez pas et ne supprimez pas la classe avec la transition définie.

10voto

Max Duchan Points 39

Si vous pouvez utiliser jQuery, vous pouvez essayer BgSwitcher plugin pour changer l'image de fond avec des effets, il est très facile à utiliser.

Par exemple :

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

Et ajoutez votre propre effet, voir ajouter un type d'effet

0 votes

Merci, j'ai résolu le problème de l'animation du changement d'arrière-plan des tables avec l'utilisation de ce plugin.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X