Considérez ce qui suit violon
p {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
-webkit-transition: transform 1s ease-in;
-moz-transition: transform 1s ease-in;
-o-transition: transform 1s ease-in;
transition: transform 1s ease-in;
}
a:hover + p {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
La transition fonctionne correctement dans FF, mais il n’ya aucune transition dans Safari ou Chrome (sur mon Mac).
La propriété de transition doit-elle être préfixée ou existe-t-il une sorte d'erreur de syntaxe dans mon code?
Ajoutez le préfixe du vendeur dans les transitions:
p {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
-webkit-transition: -webkit-transform 1s ease-in; /* Changed here */
-moz-transition: -moz-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
transition: transform 1s ease-in;
}
a:hover + p {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
Mise à jour (05/06/2014)
Pour répondre à certains commentaires, la raison pour laquelle vous avez omis -ms-transition
, c'est qu'il n'a jamais existé.
Vérifier:
Puis-je utiliser? Transitions ,