CSS3-Transformationen und Übergänge (Webkit)

Question

Betrachten Sie die folgende 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); 
} 

Der Übergang in FF reibungslos funktioniert, aber es ist überhaupt kein Übergang in Safari oder Chrome (auf meinem Mac).

Hat die Übergangseigenschaft das Präfix oder gibt es eine Art Syntaxfehler in meinem Code?

Answer 1

den Hersteller Präfix in den Übergängen hinzufügen:

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

-Update (05/06/2014)

einige Kommentare zu beantworten, den Grund -ms-transition wegzulassen, ist, dass es nie existiert hat .

Check:

Can I Use? Transitions,

Can I Use? Transforms,

MDN transitions,

MDN transforms