连续贝塞尔动画，不继承变化时的缓动函数

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>

连续贝塞尔动画，不继承变化时的缓动函数

Continuous bezier animation without inheriting easing-function on change

css

animation

css-animations

cubic-bezier