transition-timing-function 控制动画速度变化，常用关键词如 ease、linear、ease-in、ease-out、ease-in-out 实现不同节奏，cubic-bezier() 可自定义贝塞尔曲线实现弹性或过冲效果，结合场景选择合适曲线可提升动画流畅度与用户体验。
在CSS中实现平滑的过渡动画，除了设置过渡属性和持续时间外，timing-function 是决定动画“节奏感”的关键。它控制动画从开始到结束的速度变化方式，让过渡更自然或更具表现力。
transition-timing-function 基本取值
该属性定义过渡过程中速度的变化曲线。常用预设关键词包括：
- ease：默认值，慢速开始，然后变快，最后再慢下来
- linear：匀速运动，每一帧速度一致，显得机械
- ease-in：缓慢开始，结束时加速，适合“出现”类动画
- ease-out：快速开始，缓慢结束，常用于元素淡出或收起
- ease-in-out：两端慢中间快，对称缓动，视觉上最舒适
示例：
transition: opacity 0.5s ease-in-out;cubic-bezier 自定义贝塞尔曲线
如果预设的 timing-function 不够用，可以用 cubic-bezier() 函数自定义速度曲线。它接受四个参数：
cubic-bezier(x1, y1, x2, y2)
这四个值代表贝塞尔曲线的两个控制点（P1 和 P2），其中 x 必须在 [0, 1] 范围内，y 可以超出范围实现“回弹”或“过冲”效果。
常见自定义曲线示例：
立即学习“前端免费学习笔记（深入）”；
- cubic-bezier(0.68, -0.55, 0.27, 1.55)：弹性缓动，类似弹簧效果
- cubic-bezier(0.25, 0.46, 0.45, 0.94)：柔和进入，略带加速
- cubic-bezier(0.77, 0, 0.18, 1)：快速启动，缓慢收尾
使用方法：
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);如何选择合适的曲线？
动画的 timing-function 应服务于用户体验：
- 按钮点击、菜单展开建议用 ease-out，让人感觉轻快响应
- 模态框出现或重要提示可用 ease-in 引导注意力
- 需要强调动感或趣味性时，尝试自定义 cubic-bezier
- 借助工具如 cubic-bezier.com 可实时预览并生成曲线代码
基本上就这些。掌握 timing-function 和 cubic-bezier，能让 CSS 过渡摆脱生硬，变得生动自然。
