transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

This should warp the timing of a transition in CSS. Imagine a box one unit tall. A line runs from point 0,0 (horizontal,vertical) at the lower left to point 1,1 at the upper right. The end points may be warped by bezier curve handles not unlike those in Adobe Illustrator. This has a little GUI control letting you experiment with as much for example. As you move the endpoints the line bends and the line represents how an animation will behave during its duration. Will it move at a consistent speed the entire time? Will it start fast and end slow? etc. Read from left-to-right, a trend hoziontally in the bend means "slow down" and a trend vertically means "speed up." The four numbers in the CSS represent the position of the handle for the lower left end followed by the position of the handle for the upper right end.