transition-delay用于控制过渡动画的启动时间，单位为秒或毫秒。它常与transition-duration、transition-property配合使用，可通过简写属性设置。支持多个延迟值以创建错落动画，如导航菜单逐项出现、卡片悬停效果等。允许负值，表示从动画中途开始。需注意避免过度堆叠延迟影响体验。

在使用 CSS 的 transition-delay 属性时，可以控制元素的过渡效果在何时开始执行。这个属性不会影响过渡本身，只决定延迟多长时间才启动动画。它非常适合用来创建有节奏感的交互动画，比如按钮悬停、菜单展开或页面加载动效。

transition-delay 基本语法

transition-delay 的值是一个时间，单位可以是秒（s）或毫秒（ms）。它通常与 transition-property、transition-duration 一起使用，也可以通过 transition 简写属性统一设置。

示例：

.box {
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-delay: 0.3s;
}

或者用简写形式：

.box {
  transition: background-color 0.5s 0.3s;
}

这表示背景色变化会在触发后延迟 0.3 秒再开始，持续 0.5 秒完成。

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

多个属性分别设置延迟

当需要对不同属性设置不同的延迟时，可以在 transition 中用逗号分隔多个定义。

星声AI

可分享的AI播客内容生成器和效率工具

185 查看详情 示例：让宽度先动，高度稍后动

.box {
  transition: width 0.4s 0s, height 0.4s 0.2s;
}

这样，width 的过渡立即开始，height 则延迟 0.2 秒再启动，形成错落的动画效果。

实际应用场景

常见用途包括：

• 导航菜单中子项逐个出现

• 卡片悬停时文字和图标依次浮现
• 加载动画中的波纹或点按顺序显示

例子：三个小方块依次变色

.item-1 { transition-delay: 0.1s; }
.item-2 { transition-delay: 0.3s; }
.item-3 { transition-delay: 0.5s; }

配合 hover 触发颜色变化，就能看到逐个响应的效果。

注意事项

transition-delay 只影响过渡的启动时间，不影响其执行过程。如果元素状态快速切换（如频繁移入移出），浏览器会根据当前状态重新计算过渡起点。同时，负值也是允许的，表示动画从中间位置开始播放。

基本上就这些。合理使用 delay 能让界面更生动，但别过度堆叠延迟，以免影响用户体验。

以上就是如何用css transition-delay实现延迟过渡的详细内容，更多请关注其它相关文章！

# css  # 浏览器  # 多个  # 如何用  # 中不  # 不均匀  # 常与  # 是一个  # 加载  # 就能  # 会在  # 相关文章  # 南阳湖南网站优化推广  # 产品名称seo什么意思  # 潼南区网站建设推广  # 黑龙江网站建设企业  # 福泉网站建设推广  # 坪地优化网站维护  # 网站怎么搜关键词排名  # 安阳seo推广费用  # 网站优化推广  # 相城网站优化咨询