CSS 过渡属性详解：transition-timing-function 和 transition-delay
2026-10-19 10:14:13
transition-timing-function 和 transition-delay 是 CSS 过渡属性中用于控制动画节奏和触发时机的关键属性，具体作用如下：
transition-timing-function
该属性定义过渡效果的时间曲线，即动画速度的变化模式。默认值为 ease，表示动画以慢速开始、加速后减速结束。其他常用值包括：
ease-in：动画以慢速开始，逐渐加速，适合需要强调起始状态的场景。
ease-out：动画以快速开始，逐渐减速，适合需要强调结束状态的场景。
ease-in-out：动画在开始和结束时均较慢，中间加速，平衡了起始与结束的视觉效果。
linear：匀速运动，无加速或减速，适用于需要机械感或稳定变化的场景。
cubic-bezier(n,n,n,n)：通过自定义贝塞尔曲线的四个控制点（x1,y1,x2,y2）实现更复杂的时间曲线，例如模拟弹性或反弹效果。
示例代码中，.box:hover 的宽度过渡使用 ease-out，使动画在开始时快速变化，随后逐渐减缓，形成自然流畅的视觉效果。
transition-delay
该属性定义过渡效果开始前的延迟时间，单位为秒（s）或毫秒（ms）。通过设置延迟，可以控制多个元素的过渡顺序或实现交互的节奏感。例如，在导航菜单中，子菜单项的显示可以依次延迟0.1秒，形成逐级展开的动画。
示例代码中，.box 的过渡效果延迟 0.5秒 后触发，即鼠标悬停后需等待半秒，宽度才开始从100px过渡到300px。这种延迟常用于避免多个动画同时触发导致的视觉混乱，或模拟现实中的物理延迟（如按钮点击后的反馈延迟）。
综合应用
将两者结合可实现更精细的动画控制。例如，通过 ease-in-out 配合 0.3s延迟，可以让元素在用户交互后短暂停顿，随后以柔和的节奏完成变化。这种组合在表单提示、加载动画等场景中能显著提升用户体验。
热门标签
