在 CSS3 中，过渡动画的持续时间（即动画从开始到结束所花费的时间）由 transition-duration 属性或 transition 简写属性中的第二个值来设置。

✅ 一、设置持续时间的两种方式

方法 1：使用 transition-duration 单独设置

Css深色版本.element {  transition-property: width;  transition-duration: 0.6s; /* 动画持续 0.6 秒 */  transition-timing-function: ease;}

方法 2：在 transition 简写中设置（推荐）

Css深色版本.element {  transition: width 0.6s ease;  /*           ↑     ↑    ↑                属性  时长  缓动函数 */}

✅ 推荐使用简写形式，代码更简洁，维护更方便。

✅ 二、语法说明

Css深色版本transition: property duration timing-function delay;

• duration 是第二个参数

• 必须带单位：秒（s） 或 毫秒（ms）

• 示例：0.5s、2s、300ms

⚠️ 如果 duration 为 0s（默认值之一），则没有动画效果，样式会立即切换。

✅ 三、持续时间的常见取值

✅ 四、实用示例

示例 1：按钮悬停缓慢变色

Css深色版本.btn {  background-color: #007bff;  transition: background-color 0.4s ease; /* 0.4秒完成过渡 */}.btn:hover {  background-color: #0056b3;}

✅ 效果：颜色在 0.4 秒内平滑变化，不突兀。

示例 2：多个属性不同持续时间

Css深色版本.card {  transition: 
    opacity 0.3s ease,      /* 透明度：0.3秒 */    transform 0.6s ease,    /* 变换：0.6秒 */    width 1s linear;        /* 宽度：1秒，匀速 */}

✅ 不同属性使用不同速度，增强视觉层次。

示例 3：统一设置所有属性的持续时间

Css深色版本.box {  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);}

✅ 所有可动画属性都用 1.5 秒完成，适合复杂动画。

✅ 五、单位换算参考

✅ 六、常见问题与注意事项

✅ 七、最佳实践建议

• ✅ 性能优先：对 transform 和 opacity 使用过渡，由 GPU 加速，更流畅。

• ✅ 自然节奏：0.3s ~ 0.6s 是大多数交互的“黄金时长”。

• ✅ 避免过长：超过 1 秒的过渡可能让用户感觉“卡顿”或“响应慢”。

✅ 总结

通过合理设置 transition-duration，你可以控制动画的节奏，让界面交互更加自然、专业。