css过渡如何设置动画时间_通过duration属性控制过渡时长

transition-duration 是控制 css 过渡时长的唯一核心属性，必须与 transition-Property 搭配使用，单位只能是 s 或 ms（如 0.3s 或 300ms），且仅当属性计算值实际变化时才生效。

transition-duration 是控制 CSS 过渡动画时长的唯一核心属性，它不叫“time”也不叫“animation-time”，写错名就完全失效。

transition-duration 必须和 transition-property 搭配才生效

单独设 transition-duration: 0.3s 不会触发任何过渡——浏览器根本不知道你要过渡哪个属性。必须明确指定属性名，或用 all（但慎用）：

button {   background-color: #007bff;   transition-property: background-color;   transition-duration: 0.3s; } button:hover {   background-color: #0056b3; }

• transition-property 可以是 background-color、transform、opacity 等具体值，也支持逗号分隔多个，比如 background-color, transform
• 用 all 虽方便，但容易意外触发无意义的属性变化（比如 box-shadow 的微小重绘），影响性能
• 现代写法常合并为 transition: background-color 0.3s;，此时 transition-property 和 transition-duration 隐式绑定

时间单位只能是 s 或 ms，不能省略单位

transition-duration: 300 是无效的——CSS 不认裸数字。必须带单位：

• 0.3s（推荐，可读性好）
• 300ms（等价，适合做精确毫秒级控制）
• 1.5s、0.05s 都合法；但 50、.3、300s（单位过大）都会被忽略

多个过渡阶段要用 transition-delay 配合 duration

如果想实现“先变颜色，0.1 秒后再缩放”，不能只靠一个 transition-duration。得用 transition-delay 错开起始时间：

立即学习“前端免费学习笔记（深入）”；

icon {   transition:      color 0.2s,     transform 0.3s 0.1s; /* 0.1s 后开始 transform 过渡 */ }

• 第二个时间值是 transition-delay，不是 duration 的一部分
• 写成 transform 0.3s ease 0.1s 时，顺序固定：property duration timing-function delay
• delay 为负值（如 -0.1s）会让过渡从中间状态开始，适合“切入即动”的效果，但兼容性和可维护性较差

真正容易被忽略的是：过渡是否触发，取决于「两个状态间该属性是否发生了计算值变化」。比如从 display: none 到 block，display 本身不可过渡；又比如 font-size: clamp(1rem, 2vw, 1.2rem) 在视口缩放时的动态变化，也不会触发 transition——这些都不是 duration 能解决的问题。