CSS动画中连续时间参数的含义及顺序疑问解答

问题1：CSS动画定义中的第一个和第二个时间属性分别代表什么？ #

• 第一个时间值：对应animation-duration，是动画完成一次完整循环所需的时长
• 第二个时间值：对应animation-delay，是元素加载完成后，延迟多久才触发动画

问题2：示例代码中.myDiv的animation属性里的1s和1.8s分别代表什么？ #

先看示例代码：

.myDiv {
  animation: moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

这里的1s是动画持续时长（animation-duration），即moveUp动画跑完一次需要1秒；1.8s是动画延迟时长（animation-delay），意思是这个元素加载后，要等1.8秒才会开始播放动画。

关于你提到的“参数顺序和MDN文档不一致”的疑问：
CSS animation缩写属性的时间值有特殊判断逻辑——只要出现两个时间值，第一个必然是动画时长，第二个必然是延迟时长，和其他参数（比如动画名称、缓动函数、填充模式）的相对位置无关。你觉得的“顺序不一致”，大概率是MDN示例里的参数排列和这个例子不同，但核心的时间值判断规则是固定的，不存在冲突。

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