css transition-timing-function用于定义css过渡效果中属性值变化的速度曲线，它决定了动画从起始状态到结束状态的速率变化规律，是让过渡效果更自然的关键属性。合理使用该属性可以避免动画显得生硬，适配不同的交互场景需求。
transition-timing-function基础语法
该属性需要和transition-property、transition-duration等过渡属性配合使用，基本语法格式如下：
/* 单个属性设置缓动函数 */
.element {
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease;
}
/* 多个属性分别设置缓动函数 */
.element {
transition: width 1s ease, height 1s linear;
}
内置缓动函数的适用场景
css提供了多个内置的缓动函数，每个函数对应不同的速度变化规律，适用场景各有区别：
| 缓动函数 | 速度变化规律 | 适用场景 |
|---|---|---|
| ease | 慢速开始，然后变快，最后慢速结束 | 通用过渡场景，比如按钮背景色变化、卡片展开收起 |
| linear | 匀速变化 | 无限循环动画、进度条加载、元素匀速位移 |
| ease-in | 慢速开始，逐渐变快 | 元素入场动画、下拉菜单展开效果 |
| ease-out | 快速开始，逐渐变慢 | 元素退场动画、提示框消失效果 |
| ease-in-out | 慢速开始和结束，中间速度较快 | 元素双向过渡、模态框弹出收起 |
自定义cubic-bezier曲线
当内置缓动函数无法满足需求时，可以使用cubic-bezier()函数自定义贝塞尔曲线，该函数接收四个参数，对应两个控制点的坐标，数值范围在0到1之间：
/* 自定义一个先快后慢再稍快的曲线 */
.custom-timing {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
可以通过在线的贝塞尔曲线调试工具调整参数，得到符合需求的缓动效果，调试完成后将参数复制到css代码中即可。
实际应用案例
按钮点击反馈效果
按钮点击时添加缩放过渡，使用ease-out缓动让缩放效果更自然：
.btn {
padding: 10px 20px;
background: #409eff;
color: #fff;
border: none;
border-radius: 4px;
transition: transform 0.3s ease-out;
}
.btn:active {
transform: scale(0.95);
}
侧边栏展开收起效果
侧边栏宽度变化使用ease-in-out缓动，让展开和收起的速度变化都更平滑：
.sidebar {
width: 60px;
height: 100vh;
background: #333;
transition: width 0.4s ease-in-out;
}
.sidebar.expanded {
width: 200px;
}
使用注意事项
- 不要滥用复杂的自定义曲线，大多数场景下内置缓动函数已经足够满足需求，过度自定义反而可能让动画显得突兀。
- 过渡时长需要和缓动函数匹配，时长过短的话缓动效果很难被用户感知，时长过长则会让交互显得拖沓。
- 如果多个属性的过渡时长相同且缓动函数相同，可以统一写在
transition简写属性中，减少代码冗余。
合理运用transition-timing-function可以让页面的过渡效果更符合用户的视觉预期，提升整体的交互质感，是前端动画优化的重要技巧。
csstransition-timing-function动画曲线缓动效果前端动画修改时间：2026-07-17 05:06:28