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 影响。比如：
九歌
九歌–人工智能诗歌写作系统
322 查看详情 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，就能做出既流畅又不拖沓的动画效果。不复杂但容易忽略细节。
以上就是如何通过css transition-duration控制过渡速度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1037700.html
微信扫一扫 
支付宝扫一扫 
