CSS3 transformacje i przejścia (Webkit)

Question

Rozważmy następujący 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); 
} 

Przejście działa płynnie w FF, ale nie ma w ogóle przejście w Safari lub Chrome (na komputerze Mac).

Czy właściwość przejścia ma być prefiksowana lub czy w moim kodzie występuje jakiś błąd składniowy?

Answer 1

dodać przedrostek producent na przemian:

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 (06/05/2014)

Aby odpowiedzieć na kilka uwag, powodem pominięcia -ms-transition, jest to, że nigdy nie istniał .

Sprawdź:

Can I Use? Transitions,

Can I Use? Transforms,

MDN transitions,

MDN transforms