transition-delay用于设置过渡效果的延迟时间，语法为transition-delay: ，单位为秒或毫秒；可与transition-property、transition-duration配合使用，也可在简写属性transition中按“property duration delay”顺序定义多个属性的不同延迟，实现错落动画效果。
在CSS中，transition-delay 用于定义过渡效果开始执行的时间。也就是说，它控制属性变化后，延迟多久才开始播放过渡动画。
基本语法
transition-delay: ;
其中 可以是秒（s）或毫秒（ms）。例如：
transition-delay: 0.5s; — 延迟0.5秒 transition-delay: 200ms; — 延迟200毫秒 transition-delay: 0s; — 无延迟，立即开始（默认值）
与 transition-property 搭配使用
通常你不会单独使用 transition-delay，而是和 transition-property、transition-duration 等一起设置。例如：
.box { width: 100px; transition-property: width; transition-duration: 0.3s; transition-delay: 0.2s; } .box:hover { width: 200px; }
当鼠标悬停时，宽度变化不会立刻开始过渡，而是等待0.2秒后再用0.3秒完成变宽。
立即学习“前端免费学习笔记（深入）”；
多个属性分别设置延迟
如果你同时过渡多个属性，可以为每个属性指定不同的延迟时间，用逗号分隔：
Revid AI
AI短视频生成平台
96 查看详情 .box { width: 100px; height: 50px; transition-property: width, height; transition-duration: 0.3s, 0.5s; transition-delay: 0.2s, 0.6s; }
这里 width 的过渡在变化后0.2秒开始，持续0.3秒；height 则在0.6秒后开始，持续0.5秒。
简写形式更常用
实际开发中，推荐使用 transition 简写属性，把 duration 和 delay 写在一起：
transition: width 0.3s 0.2s, height 0.5s 0.6s;
格式为：property duration delay（delay 在 duration 后面）
例如：
.box { transition: width 0.3s 0.2s, height 0.5s 0.6s; }
基本上就这些。合理使用 transition-delay 能让动画更有节奏感，比如实现逐个淡入、错落出现的效果，不复杂但容易忽略细节。
以上就是在css中如何通过transition-delay设置延迟的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1035488.html
微信扫一扫 
支付宝扫一扫 
