Search code examples
javascriptcsscss-transitionstiming

Trying to make ease-in-out-expo timing function using standard css3

The standards timing functions of CSS3 don't have ease-in-out-expo.

The standard ease-in-out is HERE - MDN

But I want to make it like easeInOutExpo seen HERE - easings.net

I'm real new to timing-function so was struggling mightily with it. Please help.

Edit: I found this code in jquery.easing.1.3.js but I don't know how to convert it to cubic-bezier's four arguments.

easeInOutExpo: function (x, t, b, c, d) {
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
Solution

  • The css for easeInOutExpo is on the page you linked to:

    div {
  -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
  transition:         all 600ms cubic-bezier(1, 0, 0, 1); }

    See this also on cubic bezier

    FIDDLE