尝试使用标准css3进行轻松的博览会计时功能

时间:2014-03-03 07:44:22

标签: javascript css3 css-transitions timing

CSS3的标准计时功能没有轻松的博览会。

标准的轻松进出是HERE - MDN

但是我想让它看起来就像是HERE - easings.net

中的easeInOutExpo

我对计时功能真的很陌生,所以我正在努力奋斗。请帮忙。

编辑: 我在jquery.easing.1.3.js中找到了此代码,但我不知道如何将其转换为cubic-bezier的四个参数。

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;
},

1 个答案:

答案 0 :(得分:1)

easyInOutExpo is on the page you linked to的css:

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

另见cubic bezier

<强> FIDDLE