css - 変更時にイージング関数を継承しない連続ベジエ アニメーション

Question

私はこのアニメーションを持っていますが、現在は開始時にのみ高速であることを意図していますが、85% - 95% に達すると、ポイント 0 から再び開始して別の高速開始モーションを作成するのではなく、3 次ベジエを継続的に遅くする必要があります。アニメーションの状態が変化するたびに複数のキュービックベジエを追加する方法や、イージング関数を状態から状態へと連続させる方法はありますか?

.animate-winner {
  animation: rollWinnerBait 9s cubic-bezier(0,.9,.76,.99) forwards normal 1
}

@keyframes rollWinnerBait { 
  0% {
    transform: translateX(4988px)
  }

  85% {
    transform: translateX(-80px)
  }

  95% {
    transform: translateX(11px)
  }

  98% {
    transform: translateX(-9px)
  }

  100% {
    transform: translateX(0px)
  }
}