CSS3 transforms and transitions (Webkit)

Question

Consider the following 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);
}

The transition works smoothly in FF but there is no transition at all in Safari or Chrome (on my Mac).

Has the transition property to be prefixed or is there some kind of syntax error in my code?

Solution

Add the vendor prefix in the transitions:

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)

To answer some comments, the reason for omitting -ms-transition, is that it has never existed.

Check:

Can I Use? Transitions,

Can I Use? Transforms,

MDN transitions,

MDN transforms

Comments

[Fábio Duque Silva]

Of course I just added the -webkit- prefix because your complain was about Safari and Chrome. You should add the prefix for -moz- and the rest, but based on what you said, FF doesn't need it.

[gregory]

Yeah, obviously.I didn't find any documentation on that. In all resources I found the transition property is non-prefixed.

[Fábio Duque Silva]

I just knew it had to work, but I didn't find any direct example, also. The closest thing was this: css-infos.net/property/-webkit-transition-property , in which you can see that the <name> has to be the same name as the CSS rule...in this case with the vendor prefix. Cheers

[Fábio Duque Silva]

Well, that edit by @gregory renders my first comment obsolete. I only changed the webkit line on purpose, but nonetheless, I think the edited version might be more useful to future visitors.

[sompylasar]

What about applying a transition to -ms-transform?

[Lodewijk]

It's a secret ploy to artificially diminish IE's featureset.

[Fábio Duque Silva]

@sompylasar Well, I didn't apply a transition to -ms-transform, because that's basically impossible. -ms-transition has never existed, afaik. You can only use transition on IE >= 10 and transform is also available on IE >= 10. -ms-transform is only used on IE9. CanIUse Transitions, CanIUse Transforms, MDN Transitions, MDN Transforms