transition-duration属性用于设置CSS过渡动画的持续时间，值越长过渡越慢，单位支持秒（s）和毫秒（ms）；可为不同CSS属性指定不同的过渡时长，如background-color用0.3s、transform用0.6s；结合transition-timing-function（如ease、linear、ease-in-out）可调整过渡的速度感，使动画更自然；常见场景中，悬停效果建议0.2s-0.4s，菜单展开0.3s-0.6s，页面切换0.5s-1s，避免过短或过长影响体验。
通过 transition-duration 属性，你可以控制 CSS 过渡动画的持续时间，也就是元素从一种样式变化到另一种样式的速度。这个值越长，过渡越慢；值越短，过渡越快。
transition-duration 基本语法
你可以在 transition 或单独使用 transition-duration 中设置时间，单位支持秒（s）和毫秒（ms）。
示例：-
transition-duration: 0.5s;— 半秒完成过渡 -
transition-duration: 200ms;— 200毫秒完成过渡 -
transition-duration: 1s;— 1秒完成过渡
控制不同属性的过渡速度
如果希望元素的不同 CSS 属性以不同速度过渡，可以为每个属性分别指定 duration。
示例：
div {
transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s; /* 背景颜色快，旋转慢 */
}
上面代码中，背景颜色在 0.3 秒内变化，而 transform 需要 0.6 秒。
立即学习“前端免费学习笔记（深入）”；
结合 transition-timing-function 调整速度感
虽然 transition-duration 控制总时长，但实际“快慢感觉”还受 timing function 影响。比如：
-
ease：开始慢，中间快，结束慢 -
linear：匀速进行 -
ease-in：开始慢，逐渐加速 -
ease-out：开始快，结束慢
搭配使用能让过渡更自然。例如：
button {
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
常见使用场景建议
根据交互类型选择合适的时间：
- 悬停效果（如按钮变色）：0.2s - 0.4s，响应灵敏
- 菜单展开/位移动画：0.3s - 0.6s，避免太快看不清
- 页面切换或大范围动画：0.5s - 1s，给予视觉缓冲
太短（如 0.1s）可能察觉不到过渡，太长（如 2s）会显得迟钝。
基本上就这些。合理设置 transition-duration，再配合 timing-function，就能做出既流畅又不拖沓的动画效果。不复杂但容易忽略细节。
