バウンススタイルの CSS イージング カーブ
2 つの制御点をドラッグしてカスタム CSS cubic-bezier() タイミング関数を設計し、線形参照に対してライブでプレビューし、準備ができた値をコピーします。
処理中...
0%
結果
このページでは、x1=0.68、y1=-0.55、x2=0.265、y2=1.55 が既にロードされているジェネレーターが開きます。一部のイージング ライブラリでは、easeOutBack というラベルが付いているオーバーシュート カーブが表示されます。負の y1 と 1 を上回る y2 は、まさに、以下のアニメーション プレビューが開始を過ぎて終了を過ぎてから落ち着く理由です。いずれかのハンドルをドラッグするか数値を編集して、効果を強くしたり穏やかにしたりします。
正直に言うと、単一の cubic-bezier() カーブには制御点が 2 つしかないため、複数のホップが減少する本物のマルチバウンス物理バウンスではなく、1 つのオーバーシュートとセトリングのモーションに近似できます。文字通りのボール バウンス エフェクトを実現するには、複数のキーフレームまたは Steps() セグメントを連結する必要があります。この曲線は、単純なトランジション タイミング関数が 1 行で取得できる最も近い曲線です。
この 1 つのオーバーシュートは、依然としてほとんどの弾む UI が望んでいることです。静止サイズをわずかに超えて飛び出すボタン、安定する前にオーバーシュートするモーダル、所定の位置に飛び出すカードなどです。値をそのままコピーしてそのきびきびとした感触を得るか、y1 を 0 に向けて、y2 を 1 に向けてソフトにしてオーバーシュートを元に戻します。