[SOLVED] Continuous bezier animation without inheriting easing-function on change

Continuous bezier animation without inheriting easing-function on change

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)
  }
}

Solution

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>