9

私は現在、CSS トランジションをかなり頻繁に使用していますが、イーズイン、イーズアウトなどにしかアクセスできないことに制限を感じています。ベジエ曲線オプションはほとんどの制御を可能にしているように見えますが、これでも実際のイージング式を指定することはできません。弾性イージングなどをシミュレートします.別のオプションはありますか、またはこのタイプのアニメーションを実行するにはjavascriptに頼る必要がありますか?

4

4 に答える 4

11

Caesarを使用して、さまざまな方程式の CSS を生成できます。

于 2011-06-01T10:34:02.213 に答える
2

純粋な CSS で柔軟な遷移を行う方法がないことがわかりました。ただし、ごまかして CSS アニメーションを実行することはできます。これは、アップルがサイトで使用しているものです。

@-webkit-keyframes open-1 {
    from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
    25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
    30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
    35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
    45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
    50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
    60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
    65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
    75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
    80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}

これらのアニメーションは、Apple 自身の Web サイト ( http://www.apple.com/mac/ ) で大部分使用されています。

明らかに、これはある程度強力です。アニメーションはパーセンテージであるため、持続時間を簡単に変更して効果を保持できます。

ただし、これはまだ非常に静的です。ボタンをクリックして、伸縮自在のスケーリング アニメーションを実行させたいとしましょう。問題ありません。ボタンごとに 1 つのアニメーションを何度でも使用できます。しかし、ユーザーが画面上で最後にクリックまたはタップした場所に要素の位置を弾力的にスナップさせたいとしましょう。この場合、キーフレームを動的に再計算してから、アニメーションを要素に適用する必要があります。

これを書いている時点では、JavaScript 内でその場で CSS アニメーションを動的に生成する良い例があるかどうかはわかりません。実際、おそらく別の質問が必要です。全体として、これは純粋に CSS を使用してエラスティック イージングなどの複雑なイージング式をレンダリングする唯一の純粋な CSS の方法です。

于 2011-06-23T18:53:29.427 に答える
2

実際には、bounce-ease-in や elastic-ease-out などの複雑なイージング関数をサポートするために JavaScript ライブラリは必要ありません。これは、キーフレームを生成し、w3c 仕様でサポートされていない 12 の追加のイージング関数を有効にする CSS3 アニメーション ジェネレーター ツールです。

http://www.css3animationgenerator.com/

于 2012-05-16T16:24:02.820 に答える
0

mootools を使用している場合は、独自の方程式を書くことができます。

http://mootools.net/docs/core/Fx/Fx.Transitions

クラス: Fx.Transition

このクラスは、独自のイージング方程式を書きたい数学の天才にのみ役立ちます。「easeIn」、「easeOut」、「easeInOut」メソッドを持つ Fx トランジション関数を返します。

jqueryやprototypeなどの他のライブラリも同じクラスを持っているかもしれませんし、似たようなものを持っているかもしれません。

幸運を！

于 2011-06-01T10:39:23.900 に答える