Continuous bezier animation without inheriting easing-function on change - css

Question

I have this animation, it is currently meant to be only fast at the start, however when it reaches 85% - 95% the cubic-Bezier should be continuously slow instead of starting from point 0 again and creating another fast start motion. Is there any way to add multiple cubic-Beziers for each animation state change or have the easing-function continuous from state to state?
.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)
}
}

Answer 1

Update the timing function inside the animation:
.animate-winner {
animation: rollWinnerBait 5s cubic-bezier(0, .9, .76, .99) forwards;
width:100px;
height:100px;
margin:5px;
background:red;
}
.animate-winner.new {
animation: rollWinnerBait-new 5s cubic-bezier(0, .9, .76, .99) forwards;
}
#keyframes rollWinnerBait {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(-80px);
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(-9px)
}
100% {
transform: translateX(0px);
}
}
#keyframes rollWinnerBait-new {
0% {
transform: translateX(4988px)
}
85% {
transform: translateX(-80px);
animation-timing-function:linear;
}
95% {
transform: translateX(11px)
}
98% {
transform: translateX(-9px)
}
100% {
transform: translateX(0px);
animation-timing-function:linear;
}
}
<div class="animate-winner"></div>
<div class="animate-winner new"></div>