如何用css transition-timing-function调整过渡曲线

transition-timing-function用于控制CSS过渡的速度曲线，不改变时长但影响快慢节奏。常用关键词包括ease（默认，先慢后快再慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（两端慢中间快）。还可使用cubic-bezier(x1, y1, x2, y2)自定义贝塞尔曲线实现弹性效果，如cubic-bezier(0.175, 0.885, 0.32, 1.275)用于按钮缩放。此外，steps(n)可实现分步动画，如steps(8)用于精灵图帧播放，step-start和step-end分别表示立即跳转或最后一步跳转。通过合理选择缓动函数可提升交互自然度与视觉个性。

在CSS中，transition-timing-function 用来控制过渡动画的“速度曲线”，也就是元素从起始状态到结束状态的变化节奏。它不会改变过渡的时长，而是决定这个过程中快慢的分布，比如是匀速、先快后慢，还是有弹跳感。

常用的预设缓动函数

可以直接使用CSS提供的关键词来快速设置常见效果：

• ease：默认值，开始慢，中间快，结束慢，有轻微缓动。
• linear：匀速运动，每一步变化速度一致，显得机械但稳定。
• ease-in：开始慢，逐渐加速，适合“淡入”或“滑入”场景。
• ease-out：开始快，逐渐减速，常用于“淡出”或“收起”动作。
• ease-in-out：两端慢，中间快，整体更柔和，适合来回切换的动画。

示例：

.box {
  transition: all 0.5s ease-in-out;
}

使用贝塞尔曲线自定义速度（cubic-bezier）

如果预设不够用，可以用 cubic-bezier(x1, y1, x2, y2) 创建自定义的过渡曲线。这四个参数代表两个控制点的坐标（x和y都在0到1之间）。

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

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

• 例如 cubic-bezier(0.68, -0.55, 0.27, 1.55) 可以做出带有“弹跳”或“回弹”效果的动画。
• 你可以在网上找 cubic-bezier 生成器（如 https://cubic-bezier.com）调出想要的曲线，然后复制参数到CSS中。

例子：让按钮点击时有弹性缩放效果

.btn {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn:hover {
  transform: scale(1.1);
}

step函数实现逐帧过渡

如果你想让过渡“一格一格”地跳转，而不是平滑进行，可以使用 steps(n) 或 step-start / step-end。

• steps(4)：把整个过渡分成4个等步，像翻页一样变化。
• step-start：第一步就跳到终点，之后保持不变。
• step-end：一直保持起始状态，最后一步直接跳到结束。

适用场景：模拟老式动画、灯号切换、sprite图帧播放等。

.light {
  transition: background-position 1s steps(8);
}

以上就是如何用css transition-timing-function调整过渡曲线的详细内容，更多请关注php中文网其它相关文章！