css - 连续贝塞尔动画，不继承变化时的缓动功能

Question

我有这个动画，它目前只是在开始时很快，但是当它达到 85% - 95% 时，三次贝塞尔曲线应该持续缓慢，而不是再次从点 0 开始并创建另一个快速启动动作。有没有办法为每个动画状态变化添加多个三次贝塞尔曲线，或者让缓动函数在状态之间连续？

.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

更新动画内部的计时函数：

.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>