Capt. Horatio T.P. Webb
Cubic-Bezier Transitions

The return transition path isn't the reverse of the forward path!

Last Updated 2PM 6/13/2015

Time → (proportion of duration) 0.0 0.5 1.0 Time → (proportion of duration) 0.0 0.5 1.0 Proportion of Transition → 0.0 0.5 1.0 Image Width → 50 150 250 Image Height → 1 2 3 4 no canvas
1. Choose a transition-timing-function value for width:
valuecubic-bezier equivalent
linear cubic-bezier(0.00, 0.00, 1.00, 1.00)
ease cubic-bezier(0.25, 0.10, 0.25, 1.00)
ease-in cubic-bezier(0.42, 0.00, 1.00, 1.00)
ease-out cubic-bezier(0.00, 0.00, 0.58, 1.00)
ease-in-out cubic-bezier(0.42, 0.00, 0.58, 1.00)
2. Choose cubic-bezier for height (from left)
3. Move and maintain your mouse over the image below;
    Watch the image pixel width and height change
    from 50x50 to 250x250 in the graph (above right).
4. Move your mouse off the image and watch the return.
5. Note the forward and return paths below.
no canvas
Adjust the transition-timing-function for the height of the image, by dragging the red balls (#2 and #3) to create the cubic-bezier shape.

The current coordinates of the red balls are:


The current CSS timing function property for the image height is:


The CSS for the captain's image is:
 img.captain {transition-property: width,height;
              transition-duration: 4s;
              width:50px; height:50px;
 img.captain:hover {width:250px;height:250px;}

The HTML for the image above is:

 <img src="captsm.gif" id="gb" class="captain">
The current transition-timing-functions for width and height are:
no canvas right (50 + width) 50 150 250 bottom (50 + height) 250 150 50 forward and return paths

The CSS transition-timing-function that controls transition of elements can create interesting effects and appears to be in common usage on many web pages. Many of these transition effects are triggered by the .hover psuedo-class. A mouseover triggers the effect. A mouseout event causes the transition to return the elements to their original state. This naive assumption is that the path taken during the return is the "reverse" of the original path. This is an incorrect assumption.

The demonstration above shows that the forward path of the transition and the return are different. This effect is often difficult to identify when there is only one element property be changed. In the demo above I have used the width and height properties of an image to show how the forward and return paths differ.

Some things to notice in the demonstration above: