transition-duration用于设置过渡效果的持续时间，单位为秒或毫秒；可为单一属性或多个属性分别设置不同时间；常与transition-property、timing-function配合使用；推荐使用transition简写形式提升代码效率。
CSS 的 transition-duration 属性用于定义元素从一种样式过渡到另一种样式所花费的时间。换句话说，它控制动画变化的快慢，让颜色、位置、大小等属性的变化更加平滑自然。
基本语法
transition-duration: 时间值;时间值可以是秒（s）或毫秒（ms）。例如：transition-duration: 0.5s; — 半秒完成过渡 transition-duration: 200ms; — 200毫秒完成过渡 transition-duration: 1s; — 1秒完成过渡
常见用法示例
通常，transition-duration 会和其他 transition 相关属性一起使用，比如 transition-property 和 transition-timing-function。一个典型的例子是鼠标悬停时改变背景色：
.button { background-color: blue; transition-property: background-color; transition-duration: 0.3s; transition-timing-function: ease; } .button:hover { background-color: red; }在这个例子中，当鼠标移到按钮上时，背景色会在 0.3 秒内由蓝色渐变为红色。
多个属性设置不同持续时间
如果需要为不同的 CSS 属性设置不同的过渡时间，可以通过逗号分隔的方式分别指定：
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 .box { width: 100px; height: 100px; background-color: green; transition-property: width, height, background-color; transition-duration: 0.5s, 0.3s, 0.8s; }这意味着宽度变化耗时 0.5 秒，高度 0.3 秒，背景色 0.8 秒。
简写形式更高效
实际开发中，推荐使用 transition 简写属性来同时设置 duration 和其他参数，代码更简洁：
立即学习“前端免费学习笔记（深入）”；
.element { transition: background-color 0.4s ease, width 0.6s linear; }这样一行代码就定义了多个属性的过渡效果和各自的时间长度。基本上就这些。合理使用 transition-duration 能让界面交互更细腻，但时间太长会让人感觉迟钝，太短又不易察觉，建议根据实际场景调整到合适值。
以上就是css transition-duration属性控制过渡时间的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1074798.html
微信扫一扫 
支付宝扫一扫 
