I am attempting to animate a transform property using the transition property. Both are CSS3 properties that require a vendor prefix to be shown in both Safari 3.2+ and Chrome 1-25.
Is the reason why:
-webkit-transition: -webkit-transform 0.3s ease 0s, opacity 0.2s ease 0s; /* Chrome 1-25, Safari 3.2+ */
OR
-webkit-transition: -webkit-transform 0.3s ease 0s, opacity 0.2s ease 0s; /* Chrome 1-25, Safari 3.2+ */
is not working because its just not possible to use a prefixed property within another prefixed property? I am thinking that is the case, because translate by itself works just fine.
-webkit-transform: translateX(20px); /* Chrome, Safari 3.1+ */
http://cdpn.io/qgzfu