transition-timing-function 的 step

在过渡中，都是 ease-in， cubic-bezier，我们只要声明时间，比如 10秒，那么最终每一个帧都会看到动画。

那么如果要 10 秒中的第 0%， 50%， 100% 呢？意思是我们只看到开始，中间，结束的 3 个画面。

 

这功能看起来不错，能自己做一个 gif

animation: drive 4s steps(4, end) infinite; 

  @keyframes drive {

      to { transform: translateX(720px);}

  }

 

总结

有些时候我们只需要一个动画里的几个帧而已，那么要自己实现并不容易。

 

Link

• https://blog.csdn.net/gao_xu_520/article/details/79263408
• https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function