I came across an issue recently while trying to transition from left: 30px to left: 50%. The transition appeared to work, but it wasn’t smooth and transition-like. It was jumpy. Worse yet, another item I applied a transition to in the same document worked perfectly. It’s starting left value? 0px. Confusing, right?
Not really. Browsers ignore the unit type when the value is 0. That’s why margin: 0 is the same as margin: 0em and margin: 0px. If it’s zero, after all, what does the unit matter? That explains why the second item’s transition worked well.
But when there is a mis-match between the type of unit, most browsers — Firefox is the exception to date — won’t transition between the two values. The result? It jumps. The fix: make sure that you are transitioning between two values of the same unit (or transitioning from a 0 start value).
Since this is better shown than written about, this demo illustrates what I mean.