web-dev-qa-db-fra.com

Effet de fondu CSS3

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

.. actuellement, il a un effet de défilement vers le haut/bas, mais je veux que l'arrière-plan change avec un effet de fondu, que dois-je changer dans le CSS?

Merci!

csscss3fadecss-transitions
15
3zzy

Vous ne pouvez pas faire la transition entre deux images d'arrière-plan, car le navigateur n'a aucun moyen de savoir ce que vous souhaitez interpoler. Comme vous l'avez découvert, vous pouvez modifier la position d'arrière-plan. Si vous voulez que l'image se fane sur la souris, je pense que la meilleure façon de le faire avec les transitions CSS est de mettre l'image sur un élément conteneur, puis d'animer la couleur d'arrière-plan transparente sur le lien lui-même:

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);
}
25
robertc

L'effet de défilement est dû à la spécification de la propriété générique "background" dans votre CSS au lieu de l'image d'arrière-plan plus spécifique. En définissant la propriété background, l'animation fera la transition entre toutes les propriétés .. Background-Color, Background-Image, Background-Position .. Etc provoquant ainsi l'effet de défilement ..

Par exemple.

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

C'est possible, utilisez la structure ci-dessous:

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

etc...

Où le <li> contient un <a> balise d'ancrage contenant une plage, comme illustré ci-dessus. Insérez ensuite le CSS suivant:

  • LI get position: relative;
  • Donner <a> baliser un height, width
  • Ensemble <span>widthheight à 100%, afin que les deux <a> et <span> ont les mêmes dimensions
  • Tous les deux <a> et <span> avoir position: relative;.
  • Attribuer la même image de fond à chaque élément
  • <a> la balise aura la valeur "OFF" background-position, et le <span> aura le "ON" background-poisiton.
  • Pour l'état 'OFF', utilisez l'opacité 0 pour <span>
  • Pour 'ON' :hover état utiliser l'opacité 1 pour <span>
  • Met le -webkit ou -moz transition sur le <span> élément

Vous aurez la possibilité d'utiliser l'effet de transition tout en conservant par défaut l'ancien background-position échange. N'oubliez pas d'insérer IE filtre alpha.

3
Tony