web-dev-qa-db-fra.com

L'animation de transition de taille d'arrière-plan CSS3 dans Webkit ne fonctionne pas ... Bug? Ou une mauvaise syntaxe?

L'animation de la propriété background-size ne semble pas fonctionner dans Chrome ou Safari.

div {
    width: 161px;
    height: 149px;
    background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center;
    background-size: 50% 50%;
    transition: background-size 2s ease-in;
    -moz-transition: background-size 2s ease-in;
    -web-kit-transition: background-size 2s ease-in
}
div:hover {
    background-size: 100% 100%
}
<div>
hey
</div>

http://jsfiddle.net/ubcka/14/

csscss3css-transitions
23
j-man86

Vous devez vérifier la version du navigateur et s’il prend en charge à la fois background-size et transition. Si le premier, mais pas le dernier, utilise:

transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;
18
Brett Pontarelli

Ce n'est pas largement pris en charge. Voir une liste complète des propriétés CSS qui prennent en charge la transition ici . J'aurais une approche différente. Enveloppez votre élément avec background-color vous vouliez faire la transition vers, et faire une transition d'échelle pour votre élément.

<div class="your-wrapper">
  <div class="your-div">

  </div>   
</div>

assurez-vous également d'ajouter un style approprié

.your-wrapper {
   overflow:hidden
}
.your-div {
   transition: transform 0.5s; 
   -webkit-transition: -webkit-transform 0.5s
}
.your-wrapper:hover .your-div{
   transform: scale(1.5); -webkit-transform: scale(1.5);
}

Cela devrait faire l'affaire.

20
thednp

Il suffit de changer:

-web-kit-transition: background-size 2s ease-in;

à:

-webkit-transition: background-size 2s ease-in;
8
Greg

vous devez définir la taille de l'arrière-plan sur le div, sinon il n'a pas de taille définie pour l'animation.

.div { 
 background-size: 100%; //set the original size!!!!!!!!!!!!
-webkit-transition: background-size 2s ease-in;
transition: background-size 2s ease-in;
}

.div:hover { 
 background-size: 110%; 
}
6
Jess

Changement -web-kit- à -webkit-.

En outre, vous devez écrire la propriété CSS d'origine après les propriétés avec un préfixe fournisseur (c'est très important). Sinon, si le navigateur a implémenté cette propriété CSS3 (comme transition), la propriété d'origine sera remplacée par la propriété avec le préfixe du vendeur - et ce n'est pas bon.

mauvais ordre:

transition: ...;
-webkit-transition: ...;

ordre DROIT:

-webkit-transition: ...;
transition: ...;
3
Creamov