在css中如何通过transition-delay设置延迟

transition-delay用于设置过渡效果的延迟时间，语法为transition-delay: <time>，单位为秒或毫秒；可与transition-property、transition-duration配合使用，也可在简写属性transition中按“property duration delay”顺序定义多个属性的不同延迟，实现错落动画效果。

在CSS中，transition-delay 用于定义过渡效果开始执行的时间。也就是说，它控制属性变化后，延迟多久才开始播放过渡动画。

基本语法

其中 <time> 可以是秒（s）或毫秒（ms）。例如：

• transition-delay: 0.5s; — 延迟0.5秒
• transition-delay: 200ms; — 延迟200毫秒
• transition-delay: 0s; — 无延迟，立即开始（默认值）

与 transition-property 搭配使用

通常你不会单独使用 transition-delay，而是和 transition-property、transition-duration 等一起设置。例如：

当鼠标悬停时，宽度变化不会立刻开始过渡，而是等待0.2秒后再用0.3秒完成变宽。

立即学习“前端免费学习笔记（深入）”；

多个属性分别设置延迟

如果你同时过渡多个属性，可以为每个属性指定不同的延迟时间，用逗号分隔：

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

38

查看详情

这里 width 的过渡在变化后0.2秒开始，持续0.3秒；height 则在0.6秒后开始，持续0.5秒。

简写形式更常用

实际开发中，推荐使用 transition 简写属性，把 duration 和 delay 写在一起：

格式为：property duration delay（delay 在 duration 后面）

例如：

基本上就这些。合理使用 transition-delay 能让动画更有节奏感，比如实现逐个淡入、错落出现的效果，不复杂但容易忽略细节。

以上就是在css中如何通过transition-delay设置延迟的详细内容，更多请关注php中文网其它相关文章！