CSS动画曲线timing-function选择_ease linear cubic-bezier解析

在CSS动画中，timing-function 决定了动画在时间轴上的速度变化方式。换句话说，它控制“动画是如何进行的”——是匀速、先快后慢，还是有弹跳感。合理选择 timing-function 能让界面动效更自然、更具表现力。

常见的 timing-function 选项

CSS 提供了几种预设的 timing-function 值，适用于大多数常见场景：

• ease：默认值，动画先加速再减速（缓入缓出），适合大多数过渡效果。
• linear：匀速运动，每一帧的速度都一样，常用于旋转或循环动画。
• ease-in：缓慢开始，结束较快，适合淡入或从外进入的元素。
• ease-out：快速开始，缓慢结束，常用于退出动画，给人“收尾柔和”的感觉。
• ease-in-out：开始和结束都缓慢，中间快，比 ease 更对称，适合来回切换的动画。

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

如果预设不够用，可以使用 cubic-bezier(x1, y1, x2, y2) 来自定义速度曲线。它通过两个控制点定义一条三次贝塞尔曲线，横轴是时间（0 到 1），纵轴是完成进度（0 到 1）。

关键规则：

如此AI员工

国内首个全链路营销获客AI Agent

172

查看详情

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

• 四个参数必须是 0 到 1 之间的数（x 值），但 y 值可以超出范围，实现“回弹”或“ overshoot”效果。
• 例如：cubic-bezier(0.42, 0, 0.58, 1) 是 ease 的标准值。
• 想让动画起始更猛？试试 cubic-bezier(0.68, -0.55, 0.27, 1.55)，y 值超出范围带来弹性感。

如何选择合适的 timing-function？

不是所有动画都适合 ease。选择应基于元素的行为和用户体验预期：

• 按钮点击反馈用 ease-out，快速响应后柔和收尾。
• 加载旋转图标用 linear，保持节奏稳定不干扰用户注意力。
• 模态框弹出可用 cubic-bezier(.17,.67,.83,.67)，模拟轻微弹跳，增加亲和力。
• 长距离滑入动画适合 ease-in 开头，避免突兀。

基本上就这些。掌握 timing-function 的核心是理解“速度如何随时间变化”。多尝试不同曲线，配合开发者工具中的动画调试面板，能更快找到最合适的动效节奏。