A function that will take a transition-timing-function from an element and return it as a cubic-bezier() function should it not be one. This is needed because WebKit currently returns the transition-timing-function property as a keyword (such as "linear"), whereas other browsers will return the cubic-bezier(). If a browser returns a cubic-bezier…

gistfile1.txt

var element = document.getElementById('transition'); //get the element you want the timing-function of

var style = element.currentStyle || window.getComputedStyle(element, null); //get the styles for that element

var timingFunction = style.transitionTimingFunction; //specifically select the transitionTimingFunction from the styles


function convertTimingFunctionToCubicBezier(timingFunction) {
  
  var timingFunctionToCubicBezier = {
      "linear" : "cubic-bezier(0.0,0.0,1.0,1.0)",
      "ease"   : "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
      "ease-in": "cubic-bezier(0.42, 0.0, 1.0, 1.0)",
      "ease-in-out": "cubic-bezier(0.42, 0.0, 0.58, 1.0)",
      "ease-out": "cubic-bezier(0.0, 0.0, 0.58, 1.0)"
  };
  
  if(timingFunction.indexOf("cubic-bezier") < 0) { //if the timing-function returned isn't a cubic-bezier()
    timingFunction = timingFunctionToCubicBezier[timingFunction]; //convert it to one!
  }
  
  return timingFunction; //return a cubic-bezier() please, thank you muchly!
  
}

console.log("original:", timingFunction);
console.log("converted:", convertTimingFunctionToCubicBezier(timingFunction));