如何用CSS实现非等速steps动画？（宽度3段前快后慢）

直接通过自定义关键帧+指定时间占比就能实现，不用嵌套多个div，步骤很简单：

1. 定义关键帧，明确三个步进的宽度节点，同时按需求分配每个阶段的时间占比。比如假设总动画时长要让前两个阶段各占20%，最后一个占60%，关键帧可以这么写：

@keyframes width-step {
  0% { width: 0%; }
  20% { width: 33.33%; } /* 第一个步进，20%时长完成跳变 */
  40% { width: 66.66%; } /* 第二个步进，再用20%时长完成跳变 */
  100% { width: 100%; }  /* 最后一个步进，用剩下60%时长完成跳变 */
}

2. 给目标div应用动画，用step-end作为时间函数，保证每个关键帧点直接跳变，符合步进动画的需求：

.target-div {
  width: 0%;
  height: 40px;
  background: #2196F3;
  animation: width-step 5s step-end forwards;
  /* forwards 让动画结束后停在最后一帧 */
}

你可以根据实际需求调整总时长（比如把5s改成你需要的时间），或者修改关键帧里的百分比——比如想让前两个阶段更快，把20%改成15%、40%改成30%，剩下70%给最后一个阶段就行。

这种方法完全纯CSS，代码简洁，还能精准控制每个步进的时间占比，刚好匹配你要的“前两个阶段快，最后一个慢”的非线性步进效果。

内容的提问来源于stack exchange，提问作者tim