CSS过渡中transition-timing-function如何使用_缓动函数详解

transition-timing-function用于控制CSS过渡速度变化，支持ease、linear、ease-in、ease-out、ease-in-out等预设函数，也可通过cubic-bezier()自定义贝塞尔曲线实现弹性或回弹效果，配合steps()可创建分步动画，如数字翻牌，合理使用可提升界面动效的自然度与交互质感。

CSS 中的 transition-timing-function 属性用于控制过渡动画的速度变化过程，也就是我们常说的“缓动效果”。它决定了属性值在过渡过程中如何随时间变化，从而影响动画的视觉感受。合理使用缓动函数可以让界面交互更自然、更贴近真实物理运动。

transition-timing-function 基本语法

该属性通常与 transition-property、transition-duration 一起使用，可以简写在 transition 中：

transition: width 2s ease-in-out;
/* 或分开写 */
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in-out;

其中 transition-timing-function 的取值决定了动画的加速度曲线。

常用的预设缓动函数

CSS 提供了几种内置的缓动函数，适用于大多数常见场景：

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

• ease：默认值，开始慢 → 中间快 → 结束慢（轻微缓入缓出）
• linear：匀速运动，每帧速度相同，常用于旋转或平滑移动
• ease-in：开始慢，结束快，适合“淡入”或“出现”类动画
• ease-out：开始快，结束慢，让元素“柔和停下”，适合隐藏或收起
• ease-in-out：两端都缓，中间加速，整体最平滑，适合对称过渡

示例：按钮悬停变色使用 ease-in-out 更自然：

.button {
  background: #007bff;
  transition: background 0.3s ease-in-out;
}
.button:hover {
  background: #0056b3;
}

自定义贝塞尔曲线 cubic-bezier()

如果预设函数不够用，可以用 cubic-bezier(x1, y1, x2, y2) 自定义缓动曲线。四个参数代表贝塞尔曲线的两个控制点，x 值必须在 [0,1] 范围内，y 可超出（实现回弹等效果）。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

• cubic-bezier(0.1, 0.7, 1.0, 0.1)：快速启动，缓慢结束，有弹性感
• cubic-bezier(0.4, 0, 0.2, 1)：先加速再减速，比 ease-in-out 更明显
• cubic-bezier(0, 0, 0.5, 2)：先向下冲再反弹回来，模拟弹簧效果

推荐使用在线工具如 cubic-bezier.com 可视化调整曲线并生成代码。

step() 函数：分步过渡

除了平滑曲线，还可以使用 steps(n, jump-start|jump-end|...) 实现逐帧式过渡，适合模拟翻页、帧动画等场景。

• steps(4, end)：将过渡分为 4 步，每步在阶段末触发
• steps(10, start)：10 步，每步在阶段初触发

例如实现一个数字翻牌效果：

.counter {
  opacity: 1;
  transition: opacity 1s steps(10, end);
}

opacity 会从 1 到 0 分 10 次突然变化，形成“咔哒”递减感。

基本上就这些。掌握 transition-timing-function 能显著提升动效质感。从 ease-in-out 开始尝试，再根据需要使用 cubic-bezier 或 steps，让交互更生动。不复杂但容易忽略细节。

以上就是CSS过渡中transition-timing-function如何使用_缓动函数详解的详细内容，更多请关注php中文网其它相关文章！