css animation无法停在最后一帧

Question

已经使用了 animation-fill-mode: forwards; 但还是无法停在最后一帧，这是为啥
代码链接：
https://codepen.io/warden0214...

Answer 1

animation-timing-function: steps(59);
@keyframes keyframes-zhitu-des {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-17700px, 0, 0);
  }
}

Answer 2

因为你的最后一帧已经没有图像了。

你可以把setp改为59，动画里面的变化改为transform: translate3d(-17700px, 0, 0);，目的就是去掉最后一帧画面

Answer 3

animation-timing-function中steps函数把每个区域变化样式分割成了n帧，start+end帧总计n+1帧，所以是59。