5

私はいくつかのcssアニメーションを扱っています。しかし、CSSトランジションは次のイージング機能のみをサポートしていることがわかりました。

使いやすさ| 線形| イーズイン| イーズアウト| イーズインアウト| 立方ベジェ（）

純粋なCSSを使用したアニメーションでeaseOutBackイージングのようなものを使用したいと思います。私はwebkit-animationでそれを行うことを考えています。しかし、サファリだけがそれをサポートしています。

easeOutBackモーションは、オブジェクトが境界を越えて再び戻るモーションです。さまざまなモーション関数の詳細。以下のリンクをご覧ください。

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

誰かがcss変換アニメーションでeaseOutBackイージングを実装する方法の提案がありますか？

4

3 に答える 3

9

-webkit-animation-timing-functionCSSプロパティを使用して独自の曲線を指定できます。

関数の形式はcubic-bezier(P1x, P1y, P2x, P2y)、P1とP2が（0,0）から（1,1）までの3次ベジェ曲線の2つの中間点である場合です。あなたの場合、あなたは次のようなものが必要です-

EaseOutBack http://i56.tinypic.com/adg8yo.png

したがって、この曲線で指定するポイントは-(0,0)と(0.2,1)です。これにより、曲線が作成されます- cubic-bezier(0,0,0.2,1)。

残念ながら、Webkitの三次曲線の仕様では、アニメーションが1,1立方体の境界を超えることはできません。したがって、実際に必要に応じてカーブをアニメートするには、「オーバーフロー」を指定するキーフレームを追加する必要があります。

@-webkit-keyframes snapback {
    0% {
        -webkit-transform:translateX(0px);
    }
    60% {
        -webkit-transform:translateX(140px);
    }
    100% {
        -webkit-transform:translateX(100px);
    }
}

私が一緒に投げた例を見てください-http://jsfiddle.net/Heqs8/

于 2011-05-20T19:20:07.437 に答える
1

もう1つの代替手段はCSS3アニメーションジェネレーターです。これは、バックイーズアウトを含む、W3C仕様でサポートされていない12のイージング機能を有効にします。CSS3 Animation Generatorは、いくつかの制限がある3次曲線を使用するのではなく、計算されたキーフレームを使用します。

于 2012-05-16T17:01:09.073 に答える
1

次のコードはアニメーションを jQuery に追加するようeaseOutBackで、それを使用できるようになります。

jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
});

http://gsgd.co.uk/sandbox/jquery/easing/について言及しているhttp://jsfiddle.net/marcofucci/rRtAq/から見つかりました。

于 2011-04-18T10:06:01.037 に答える