ダブルオーバーシュート付きエラスティックスナップイージング

cubic-bezierによるエラスティックスナップ

y1を0未満にかつy2を1以上に設定すると、両方向にオーバーシュートするカーブが作成されます。アニメーションは前方に発射する前に巻き戻り、ターゲットを超えてから落ち着きます。

値

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

これはeaseInOutBackカーブです。負のy1 (-0.55)が開始時の「巻き戻し」エフェクトを作り、高いy2 (1.55)が終了時のオーバーシュートを作ります。組み合わさると、ラバーバンドまたはエラスティックスナップの感触を生み出します。

動きの理解

1. フェーズ1 (0%〜25%): 負のy1により、アニメーションは実際に開始位置からわずかに後退します。
2. フェーズ2 (25%〜75%): カーブの急な中間セクションを通過する際の素早い前進。
3. フェーズ3 (75%〜100%): アニメーションがターゲットをオーバーシュートし、所定の位置にスナップバックします。

コード例

.toggle-thumb {
  transition: transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toggle.on .toggle-thumb {
  transform: translateX(24px);
}

強度の調整

バリエーション	cubic-bezier	エフェクト
控えめ	(0.68, -0.2, 0.265, 1.2)	穏やかな巻き戻しとオーバーシュート
標準	(0.68, -0.55, 0.265, 1.55)	古典的なeaseInOutBack
極端	(0.68, -0.8, 0.265, 1.8)	顕著なラバーバンド

使用上の注意

エラスティックイージングは多用したり大きな動きに適用すると不快に感じられることがあります。遊び心がUXを向上させる小さく意図的なインタラクション — トグルスイッチ、小さなアイコンアニメーション、マイクロインタラクションに限定してください。