transition-duration 控制过渡持续时间，transition-delay 设置延迟；两者配合可精细调控动画节奏。例如，.box{transition-duration:0.5s}表示过渡持续0.5秒，.btn{transition-delay:0.2s}表示延迟0.2秒启动。支持多属性分别设置时间与延迟，推荐使用简写transition一次性定义所有参数，如.card{transition:all 0.4s 0.1s ease-in-out}，提升开发效率与动画流畅性。
在CSS中，transition-duration 和 transition-delay 是控制过渡效果时间行为的关键属性。它们让你能精细地掌控动画何时开始、持续多久，从而提升用户体验和界面流畅感。
transition-duration：设置过渡持续时间
这个属性定义过渡效果从起始状态到结束状态需要多长时间。
语法：
transition-duration: ;
时间单位可以是秒（s）或毫秒（ms）。
示例：
.box {
transition-duration: 0.5s;
}
表示元素状态变化时，过渡将持续0.5秒。
如果要为多个属性分别设置时间，可以用逗号分隔：
.box {
transition-property: width, opacity;
transition-duration: 1s, 0.3s;
}
width 变化用1秒，opacity 变化用0.3秒。
transition-delay：设置过渡延迟时间
这个属性决定过渡效果在属性值改变后，延迟多久才开始执行。
语法：
transition-delay: ;
示例：
.btn {
transition-delay: 0.2s;
}
鼠标悬停后，过渡会在0.2秒后启动。
延迟可以是负值，表示过渡立即开始，但会从中间状态切入：
transition-delay: -0.3s;
这在某些循环动画中很有用，可以让动画看起来已经运行了一段时间。
简写 transition 属性更高效
实际开发中，推荐使用 transition 简写形式，一次性设置所有过渡参数：
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情
立即学习“前端免费学习笔记（深入）”；
语法：
transition: property duration delay timing-function;
示例：
.card {
transition: all 0.4s 0.1s ease-in-out;
}
表示所有可动画属性在变化时，延迟0.1秒开始，持续0.4秒，使用缓动函数。
也可以同时设置多个过渡：
transition: width 1s ease, opacity 0.3s 0.2s linear;
每个部分对应各自的 duration 和 delay。
基本上就这些。掌握 duration 和 delay 的配合，能让交互更自然。比如按钮反馈快一点，页面切换慢一点加点延迟，视觉节奏就出来了。不复杂但容易忽略细节。
以上就是如何在CSS中设置过渡时间_transition-duration与延迟解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/992932.html
微信扫一扫 
支付宝扫一扫 
