当前位置：首页 > 文章列表 > 文章 > 前端 > CSStransition-delay设置技巧解析

CSStransition-delay设置技巧解析

2025-10-10 23:46:01 0浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《CSS中transition-delay设置方法详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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

在css中如何通过transition-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秒完成变宽。

多个属性分别设置延迟

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

.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,transition-delay,transition-duration,transition-property的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSStransition-delay设置技巧解析》文章吧，也可关注golang学习网公众号了解相关技术文章。

CSS Transition transition-delay transition-duration transition-property