CSS3 transforme et transitions (Webkit)

Envisager la suite 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 bien dans FF mais il n'y a pas de transition du tout dans Safari ou Chrome (sur mon Mac).

La propriété transition doit-elle être préfixée ou y a-t-il une sorte d'erreur de syntaxe dans mon code?

39
demandé sur Jordi Vicens 2012-12-09 01:47:10

1 réponses

Ajoutez le préfixe fournisseur 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 de l'omission de -ms-transition, est qu'il n'a jamais existé.

Vérifier:

Puis-Je Utiliser? Les Transitions,

Puis-Je Utiliser? Transforme,

Transitions MDN ,

MDN transforme

96
répondu Fábio Duque Silva 2014-06-05 13:12:11