CSS Transformer Échelle ne fonctionne pas sous Chrome, Safari
J'ai regardé les différentes réponses postées ici, mais rien n'a fonctionné pour moi...
Quoi: j'ai un div qui est mise à l'échelle vers le bas à 0,6 et lorsqu'il est appelé devrait échelle de 1 (100%).
Problème: Dans Firefox #myDiv est mise à l'échelle en place comme prévu, mais rien ne se passe dans Chrome ou Safari (sous mac).
J'ai cette DIV code:
#myDiv {
-moz-animation: changeSize 1s ease-out .5s forwards; /* Fx 5+ */
-webkit-animation: changeSize 1s ease-out .5s 0 forwards; /* Safari 4+ */
-o-animation: changeSize 1s ease-out .5s forwards; /* Opera */
-webkit-transform: scale(0.6);/* Saf3.1+, Chrome */
-moz-transform: scale(0.6); /* FF3.5+ */
-ms-transform: scale(0.6); /* IE9 */
-o-transform: scale(0.6); /* Opera 10.5+ */
transform: scale(0.6);
display: inline-block;
opacity:100;
background-image: url(img.png);
width: 154px;
height: 28px;
position: absolute;
left: 145px;
top: 5px;
}
Et de l'animation avec des images clés pour l'élargissement de la transition:
@keyframes changeSize {
0% {transform:scale(0.6)}
100% {transform: scale(1)}
}
@-moz-keyframes changeSize /* Firefox */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
@-webkit-keyframes changeSize /* Safari and Chrome */{
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
@-o-keyframes changeSize /* Opera */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}
Le code HTML:
Veuillez indiquer ce que je suis en manque ici!
Merci!
OriginalL'auteur user2163224 | 2013-05-03
Vous devez vous connecter pour publier un commentaire.
Votre erreur est dans cette ligne :
Il est inutile
0
!Enfin,
Au sein de ces images clés, vous manquez quelque chose. Aucun de la transformation de la propriété ont prise en charge du navigateur de préfixes. Par exemple:
J'ai ajouté -webkit - préfixe à la propriété transform maintenant, il sera affiché dans Google Chrome et Safari.
Côté remarque: vous pourriez avoir un certain inutile de blocs de code. -moz-,-ms-, et -o-.
OriginalL'auteur Arclites