UIトランジションのためのスムーズ減速イージング

スムーズ減速カーブ

ease-out（cubic-bezier(0, 0, 0.58, 1)）は基本的な減速を提供しますが、カスタムカーブでトランジションをプレミアムに感じさせるより滑らかで洗練された減速を実現できます。

値

transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

このカーブは適度に速く始まり、その後、非常に緩やかで延長された減速フェーズを持ちます。y1値が1であることは、最初のコントロールポイントが最大高さにあることを意味し、早い段階でほぼ完全な進行に達してから非常にゆっくりと最終値に到達するカーブを作ります。

標準ease-outとの比較

ease-out:          |████████████████░░░░|  (急な減速)
smooth-decelerate: |████████████░░░░░░░░|  (緩やかな減速)

スムーズ減速カーブはアニメーションの最後の10-20%により多くの時間を費やし、重量感とエレガンスの感覚を作り出します。

コード例

.card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card.visible {
  opacity: 1;
  transform: translateY(0);
}

スタガード入場パターン

このカーブは複数の要素が順番に入場するスタガードアニメーションと非常によく合います：

.card:nth-child(1) { transition-delay: 0ms; }
.card:nth-child(2) { transition-delay: 50ms; }
.card:nth-child(3) { transition-delay: 100ms; }
.card:nth-child(4) { transition-delay: 150ms; }

緩やかな減速により、スタガードされた要素が所定の位置に「スナップ」しているように感じることを防ぎ、各要素に豪華で重みのある着地を与えます。