transition-timing-function用于控制CSS过渡动画的速度曲线，不改变总时长但影响变化节奏。可选值包括ease、linear、ease-in、ease-out和ease-in-out，分别定义不同的加减速模式。通过cubic-bezier(x1, y1, x2, y2)可自定义贝塞尔曲线实现如弹跳等复杂效果。当过渡多个属性时，可分别为每个属性设置不同的timing function，如opacity用linear、transform用ease-out、background-color用ease-in，使动画更精细自然。合理运用能显著提升界面动效的流畅性与表现力。
CSS 的 transition-timing-function 属性用于控制过渡动画的速度曲线，也就是元素在过渡过程中的“快慢节奏”。它不会改变过渡的总时长，而是影响中间过程的变化速率，让动画看起来更自然或更具表现力。
常见的预设速度曲线函数
你可以使用以下内置的关键字来快速定义过渡速度：
- ease：默认值，开始慢，中间快，结束慢。
- linear：匀速运动，从头到尾速度不变。
- ease-in：开始慢，逐渐加速，结束最快。
- ease-out：开始快，逐渐减速，结束最慢。
- ease-in-out：类似 ease，但加速和减速更对称，两端都慢，中间快。
例如，让一个按钮在悬停时缓慢放大并柔和结束：
.button {
transition: transform 0.4s;
transition-timing-function: ease-out;
}
.button:hover {
transform: scale(1.1);
}
使用贝塞尔曲线自定义速度（cubic-bezier）
如果预设函数不够用，可以用 cubic-bezier() 自定义速度曲线。它接受四个参数：cubic-bezier(x1, y1, x2, y2)，代表贝塞尔曲线的两个控制点。
立即学习“前端免费学习笔记（深入）”；
比如，实现一个“弹跳式”进入效果：
JTBC网站内容管理系统5.0.3.1
下载
JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也
.bounce-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bounce-in.visible {
opacity: 1;
transform: translateY(0);
}
这个曲线会让元素“冲过头”再回弹一点，产生生动的动效。
结合多个属性分别设置速度
当同时过渡多个属性时，可以为每个属性指定不同的 timing function：
.card {
transition-property: opacity, transform, background-color;
transition-duration: 0.3s, 0.6s, 0.4s;
transition-timing-function: linear, ease-out, ease-in;
}
这样 opacity 匀速变化，transform 柔和结束，背景色缓慢开始。
基本上就这些。合理使用 transition-timing-function 能显著提升界面动效的质感，让交互更细腻。不复杂但容易忽略。
