Just a bit before the Christmas break, Chis Coyier posted a little observation on CSS3 transitions that I thought was pretty interesting. It’s definitely an accurate observation, and one that I think a lot of web designers run into when working with css3 transitions and easing.
Long/dramatic transitions, easing is better. Short/quick transitions, linear is better. dabblet.com/gist/1499252 You know, in general.
— Chris Coyier (@chriscoyier) December 19, 2011
If you look at Chris’ example below, it’s pretty clear that the “ease” transition looks very jerky and just doesn’t work well on the shorter width transition:
Personally, I find the easing that you get with the “ease” keyword to be pretty undesirable overall, but it’s not usually that jerky. So what’s going on here? And how do we fix it?
The “ease” easing (how’s that for confusing!) has a really dramatic ease-out portion to it (i.e. the way it slows down dramatically at the end of the transition). This doesn’t translate well to easing small changes in width and height. Essentially, when transitioning that small of a change, very small differences in values are being calculated to create the slower rate of movement at the end of the transition. It even looks like there might be some rounding at these small values that causes the width to “snap” to a pixel value at the end instead of moving smoothly like you’d expect.
To see what I mean, take a look at this variation below. The top box has the same “ease” easing applied to the width as Chris’ example. Below it is a box with a slightly greater change in width to ease. It’s smoother with this extra distance, but still slows very dramatically at the end.
“Ease” applied to the height of a div seems to suffer from the same snapping/jerky movement. Opacity though, doesn’t seem to. So maybe it is some kind of pixel value rounding issue that’s causing the jerkiness? It’s tough to say for sure because there are other possibilities too. But I won’t get into all that now.
Luckily for us. other easing keywords, even one that is rather similar to “ease” like “ease-in-out”, don’t suffer from the jerkiness in similar situations. In the example below the top box has the same “ease” transition as Chris’ example, while the second and third have “ease-in-out” and “linear” applied respectively.
So what can we get from all this besides the fact that I think about easing maybe just a bit too much?
There are lots of factors that affect how a specific transitions feels in the grand scheme of things, but the default “ease” easing isn’t so hot for this type of small transitions of width or height.
If you find yourself using “ease” and getting that weird jerky motion at the end, try increasing the end width or height to smooth things out. Or, try a different timing function all together. There’s a good list of pre-defined handy timing functions, or you can go all out and define a custom easing equation. (Don’t worry, someone else has done all the hard math bits for you.) There’s way more out there than just “ease” and “linear”. Thank goodness :)
