transition-duration用于定义CSS过渡效果的持续时间，单位为秒（s）或毫秒（ms），如0.5s；可单独设置或与transition属性结合使用，例如transition: background-color 0.3s ease；支持为多个属性分别指定时间，如opacity 0.2s、transform 0.6s，数值越大过渡越慢，使界面变化更流畅自然。
在 CSS 中设置 transition-duration 是用来定义过渡效果持续的时间。你可以通过这个属性控制元素从一种样式平滑地变为另一种样式所花费的时间。
基本语法
transition-duration 的值可以使用秒（s）或毫秒（ms）来表示时间长度。例如：
.box {
transition-duration: 0.5s;
}
这表示该元素的过渡效果将持续 0.5 秒。
常用单位说明
- s：秒，如 1s、0.3s
- ms：毫秒，如 300ms（等于 0.3s）
注意：即使时间为 0 也需要写单位，比如 0s 或 0ms，不能只写数字 0（虽然 0 不带单位也有效，但建议统一格式）。
立即学习“前端免费学习笔记（深入）”；
通吃客零食网整站 for Shopex
下载
第一步】：将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式，可以查看：(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】：在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】：登录后台，工具箱里恢复数据管理后台是url/sho
与 transition 一起使用
通常你会配合完整的 transition 属性来设置，比如：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: blue;
}
这里 0.3s 就是 transition-duration 的位置，表示背景色变化用时 0.3 秒。
为多个属性分别设置时间
如果你希望不同属性有不同的过渡时间，可以用逗号分隔：
.card {
transition-property: opacity, transform;
transition-duration: 0.2s, 0.6s; /* opacity 用 0.2s，transform 用 0.6s */
}
基本上就这些。只要记住 transition-duration 控制的是“动画持续多久”，数值越大越慢，越小越快，合理搭配能让界面更自然流畅。
