transition-duration - 过渡持续时间

语法说明

transition-duration: time;

• time - 过渡持续时间
• s（秒）：1s = 1000ms
• ms（毫秒）：1000ms = 1s
• 默认值是 0s（无过渡效果）
• 可以为不同属性设置不同的持续时间

示例 1：快速过渡（0.3s）

适合按钮点击等快速交互

.box {
  transition-duration: 0.3s;
  /* 或 300ms */
}

示例 2：中等速度（1s）

适合大多数动画效果

.box {
  transition-duration: 1s;
  /* 或 1000ms */
}

示例 3：慢速过渡（2s）

适合需要强调的动画

.box {
  transition-duration: 2s;
}

示例 4：多属性不同时长

为不同属性设置不同的过渡时间

.box {
  transition:
    transform 0.5s,
    background 1.5s;
  /* transform 快速变化，背景慢速变化 */
}