CSS3 के रूपांतरण और संक्रमण (वेबकिट)

Question

पर विचार करें निम्नलिखित 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); 
} 

संक्रमण एफएफ में सुचारू रूप से काम करता है लेकिन कोई संक्रमण (पर मेरी मैक) Safari या Chrome में बिल्कुल भी नहीं है।

क्या संक्रमण संपत्ति को पूर्ववर्ती किया गया है या क्या मेरे कोड में कुछ प्रकार की वाक्यविन्यास त्रुटि है?

Answer 1

संक्रमण में विक्रेता उपसर्ग जोड़ें:

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

अद्यतन (05/06/2014)

-ms-transition को छोड़ते हुए के लिए कारण कुछ टिप्पणियों का जवाब करने के लिए, यह है कि यह कभी नहीं अस्तित्व में है है ।

की जांच:

Can I Use? Transitions,

Can I Use? Transforms,

MDN transitions,

MDN transforms