CSSバウンスイージングエフェクト（オーバーシュート付き）

cubic-bezierでバウンスを作成

バウンスまたはオーバーシュートエフェクトは、y2の値が1を超える（またはy1が0未満になる）ときに発生します。アニメーションは一時的にエンドポイントを超えてから落ち着きます。

値

transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

これは古典的なeaseOutBackカーブです。キーはy2 = 1.275で、アニメーションが全体の変化量の約27.5%だけターゲットを超えてから戻ります。

オーバーシュートの仕組み

標準的なcubic-bezierでは、両方のy値は0から1の間にあります。y2が1を超えると、アニメーションの終盤で進行関数が100%を超える値を出力します。translateX(0)からtranslateX(100px)へのトランジションでは、要素が一瞬約translateX(127.5px)まで移動してからtranslateX(100px)に落ち着きます。

y2値によるオーバーシュート量

y2値	オーバーシュート	特性
1.1	約10%	控えめなバウンス
1.275	約27.5%	適度なバウンス
1.5	約50%	顕著なバウンス
1.7	約70%	誇張されたバウンス

コード例

.notification {
  transform: scale(0);
  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.notification.show {
  transform: scale(1);
}

要素が0から1にスケールし、一瞬scale(1)を超えてから落ち着き、満足感のある「ポップ」エフェクトを作り出します。

注意点

オーバーシュートするプロパティがレイアウトに影響する場合（width、heightなど）、レイアウトの問題が発生する可能性があります。リフローを避けるためにtransform（scale、translate）や非レイアウトプロパティ（opacity、box-shadow）を優先してください。