关于CSS动画关键帧百分比的理解困惑

你的核心误解在于CSS关键帧的属性补全逻辑和过渡方式，以下是具体拆解：

原理解与实际效果差异的原因 #

你写的关键帧代码中，0%、40%、47.5%、100%这些帧没有定义transform属性，浏览器会自动使用元素默认的transform: none作为这些帧的属性值。而CSS动画的核心逻辑是在相邻两个关键帧之间，对属性值进行平滑插值过渡，并非你预想的“到时间点突然触发动作”。

实际动画时间线（总时长10s） #

• 0s-4s（0%-40%）：两个关键帧的transform均为none，元素保持初始位置，无变化。
• 4s-4.25s（40%-42.5%）：从transform: none平滑过渡到transform: translateX(-50%)，这段0.25s内元素缓慢左移到目标位置，而非瞬间到位。
• 4.25s-4.5s（42.5%-45%）：从translateX(-50%)平滑过渡到translateX(50%)，0.25s内缓慢右移到目标位置。
• 4.5s-4.75s（45%-47.5%）：从translateX(50%)平滑过渡回none，0.25s内缓慢回到初始位置。
• 4.75s-10s（47.5%-100%）：保持transform: none，元素静止。

实现你预期效果的方法 #

如果想要达到“4s前不动，之后快速完成左移、右移、复位”的瞬间切换效果，可采用两种方式：

方式1：使用steps()时间函数 #

给动画添加animation-timing-function: steps(1, jump-none);，让关键帧之间直接切换，无平滑过渡：

.element {
  animation: look 10s steps(1, jump-none) infinite;
}

@keyframes look {
  0%, 40%, 47.5%, 100% {
    transform: none;
  }
  42.5% {
    transform: translateX(-50%);
  }
  45% {
    transform: translateX(50%);
  }
}

方式2：细化关键帧节点 #

通过设置极短的时间间隔，模拟瞬间切换：

@keyframes look {
  0%, 40%, 42.5%, 45%, 47.5%, 100% {
    transform: none;
  }
  40.01% {
    transform: translateX(-50%);
  }
  42.51% {
    transform: translateX(50%);
  }
  45.01% {
    transform: none;
  }
}

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