CSS3 trasforma e transizioni (Webkit)

Question

Si consideri il seguente fiddle

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 transizione funziona senza problemi in FF, ma non v'è alcuna transizione a tutti in Safari o Chrome (sul mio Mac).

La proprietà di transizione deve essere prefissa o c'è qualche tipo di errore di sintassi nel mio codice?

Answer 1

aggiungere il prefisso fornitore nelle transizioni:

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

Aggiornamento (05/06/2014)

Per rispondere ad alcune osservazioni, la ragione per omettere -ms-transition, è che non è mai esistito .

Check:

Can I Use? Transitions,

Can I Use? Transforms,

MDN transitions,

MDN transforms