The current coordinates of the red balls are:

    [fixed]
   
   
    [fixed]

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

cubic-bezier(,,,)

 img.captain {transition-property: width,height;
              transition-duration: 4s;
              width:50px; height:50px;
              top:500px;left:500px;}
 img.captain:hover {width:250px;height:250px;}

The HTML for the image above is:

 <img src="captsm.gif" id="gb" class="captain">

 cubic-bezier(,,,)";

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:

• In the upper right graph, the width and height are plotted as they change through the duration of the transition. In the forward phase you can see for the cubic-bezier timing function for height matches the shape shown in the upper left graph. But in the return phase, the graph shows that height follows the "1.0 - the cubic bezier function" -- NOT the time reversed path.

• In the middle graph above you can clearly see that the forward and return differ -- NOT what you would expect!

  I must be careful here to use the word "inversion". I do not mean "inverse" or "inversion" in the common sense, but "vertically reflected". Specifically,

  If the cubic-bezier is defined like this:

  0.0 → cubic-bezier(proportion_of_duration) → 1.0 as the proportion_of_duration ranges from 0.0 → 1.0

  Then, the reverse path "should" be:

  1.0 → cubic-bezier(proportion_of_duration) → 0.0 as the proportion_of_duration ranges from 1.0 → 0.0

  But what we see is the reverse path:

  1.0 → ( 1.0 - cubic-bezier(proportion_of_duration) ) → 0.0 as the proportion_of_duration ranges from 0.0 → 1.0

  If you have watched the transition at least once, in the upper right hand graph notice the height path is:

  1.0 - the original

  In other words, take the original graph and flip it vertically (the top becomes the bottom and the bottom becomes the top).

  I have chosen the initial cubic-bezier values so that there is a clear "quick rise" at the beginning and a long increase that moves more and more quickly at the end (it is almost vertical at the end). Notice in the forward/reverse path graph above, the "quick start" always happens at the beginning of the transition (during both forward and reverse). The nearly vertical ending is always at the end of the transition (during both forward and reverse). So the two paths always move in "forward" time and the cubic-bezier is flipped vertically during the return.

  All the browsers I have tested (Chrome, Firefox, Opera, Safari and IE) do it the same way -- indicating that this is not a mistake but a design. My guess is that the algorithms were designed to run in forward time and use (1.0-cubic-bezier) in the reverse paths. This has to be much easier to code when there are multiple transitions with different durations.

  Here is another example with a "bounce" transition: cubic-bezier(0.65, 1.95, 0.03, 0.32).

  
  Place your mouse over the red balloon and keep it on the balloon as it rises and bounces off the ceiling once.

  When you roll your mouse off the balloon, it falls to the floor and bounces!

  It does not follow the same path moving down as it did when moving up.

  One might suspect that when you mouse off the balloon on the ceiling, it would bounce off the ceiling once and then fall to the floor.

  No. It falls from the ceiling and bounces on the floor.

  While interesting, the behavior isn't what one might expect on a "return path".