css transition-timing-function函数如何使用

transition-timing-function用于控制CSS过渡动画的速度曲线，不改变总时长但影响变化速率。1. 预设值包括ease（慢-快-慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（更平滑）；2. 可用cubic-bezier(x1,y1,x2,y2)自定义贝塞尔曲线实现回弹等效果；3. 使用steps(n, jump-term)实现分步过渡，如帧动画；4. 简写transition中可直接指定timing-function，提升动画流畅度与真实感。

CSS 的 transition-timing-function 属性用于控制过渡动画在时间上的速度曲线，也就是动画“快慢变化”的方式。它不改变过渡的总时长，而是影响动画过程中每一步的变化速率。

常见的预设函数值

你可以使用一些内置的关键字来快速设置常用的速度曲线：

• ease：默认值，开始慢，中间快，结束慢。
• linear：匀速运动，从头到尾速度不变。
• ease-in：开始慢，逐渐加速，结尾最快。
• ease-out：开始快，逐渐减速，结尾最慢。
• ease-in-out：开始和结束都慢，中间加速，比 ease 更平滑。

例如，让一个元素在颜色变化时匀速过渡：

.box {
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: linear;
}

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

如果预设函数不够用，可以用 cubic-bezier(x1, y1, x2, y2) 自定义速度曲线。这四个参数代表两个控制点的坐标，必须在 0 到 1 之间（x 值），y 值可以超出范围实现“回弹”等效果。

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

比如，创建一个先回缩再快速弹出的效果：

.transition-bounce {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

这种曲线常用于模拟物理动效，让动画更生动。

如知AI笔记

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

27

查看详情

step() 函数：分步过渡

如果你想让过渡“一步步”地完成，而不是连续变化，可以使用 steps(n, jump-term) 或简写 step-start、step-end。

• steps(4, end)：把过渡分成 4 步，每步在阶段末尾跳变。
• step-start：第一步立即发生，类似“先跳再动”。
• step-end：最后一步才变化，中间保持原样。

适合做帧动画或数字翻牌效果：

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

简写形式中使用 timing-function

通常我们会用 transition 简写属性一起设置：

.element {
  transition: all 0.3s ease-in-out;
}

顺序是：过渡属性、持续时间、timing-function、延迟（可选）。timing-function 可以放在 duration 后面，也可省略使用默认值。

基本上就这些。掌握 timing-function 能显著提升动画质感，关键是理解不同曲线对用户感知的影响。不复杂但容易忽略。

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