CSS中animation-duration时长指代疑问：单帧还是整个动画周期？

animation-duration 指定的是整个动画周期的总时长，并非单帧的播放时长。

举个直观的例子：当你设置 animation-duration: 10s 时，意思是你的动画从@keyframes定义的起始状态到结束状态，完整跑完一遍整个序列的总耗时是10秒。

比如下面这段代码：

.box {
  width: 100px;
  height: 100px;
  background: #ff4444;
  animation: swing 10s linear infinite;
}

@keyframes swing {
  0% { transform: translateX(0); }
  50% { transform: translateX(300px); }
  100% { transform: translateX(0); }
}

这里的动画包含三个关键帧（初始、中间、回到原位），整个来回摆动的完整流程会在10秒内完成，不是每个关键帧阶段单独占用10秒。如果没有额外设置animation-timing-function，各个关键帧之间的过渡时长会按比例自动分配。

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