transition-duration用于定义CSS过渡效果的持续时间，单位为秒（s）或毫秒（ms），如0.5s；可单独设置或与transition属性结合使用，例如transition: background-color 0.3s ease；支持为多个属性分别指定时间，如opacity 0.2s、transform 0.6s，数值越大过渡越慢，使界面变化更流畅自然。
在 CSS 中设置 transition-duration 是用来定义过渡效果持续的时间。你可以通过这个属性控制元素从一种样式平滑地变为另一种样式所花费的时间。
例如：
.box {
transition-duration: 0.5s;
}
这表示该元素的过渡效果将持续 0.5 秒。
注意：即使时间为 0 也需要写单位，比如 0s 或 0ms，不能只写数字 0（虽然 0 不带单位也有效，但建议统一格式）。
立即学习“前端免费学习笔记（深入）”；
通常你会配合完整的 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 控制的是“动画持续多久”，数值越大越慢，越小越快，合理搭配能让界面更自然流畅。
以上就是在css中如何设置transition-duration时间的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
351
收藏
