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

SUMMER 2015
MIS 3371 Transaction Processing I
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 1 2 3 4 no canvas
1. Choose a transition-timing-function value:

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)
custom cubic-bezier (from graph to the left)
      Currently: 

2. Move your mouse over the captain's image below
    and watch the image pixel width and height
    change from 50x50 to 250x250.
no canvas
The current coordinates of the red balls are:
   
   
   
   
By moving the red balls -- P2 and P3, various cubic-Bezier shapes can be created. The coordinate values of P2 and P3 are used to define the cubic-Bezier parameters for a transition-timing-function:

cubic-Bezier(p1,p2,p3,p4)

Currently: p1, p2, p3, p4 would be:

    ball 2's horizontal coordinate
    ball 2's vertical coordinate
    ball 3's horizontal coordinate
    ball 3's vertical coordinate

the current CSS property is:

cubic-Bezier(,,,)

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

The HTML for the image above is: 

 <img src="captsm.gif" id="gb"
 class="captain" style="position:
 absolute;top:500px;left:300px;">
Once you make the the cubic-Bezier transition choices, the current cubic-Bezier transition specification is assigned to the image in javascript like this: 
 document.getElementById("gb").style.transitionTimingFunction="cubic-Bezier(,,,)";
You can use the cubic-Bezier property value in CSS for the HTML element to be transitioned. 
transition-timing-function:cubic-Bezier(,,,);
See this page for a discussion of the transition return paths.