CSS过渡元素渐变曲线如何设置_Transition timing-function与cubic-bezier应用

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS过渡元素渐变曲线如何设置_Transition timing-function与cubic-bezier应用

2025-11-27

浏览次数：次

返回列表

transition-timing-function 控制动画速度变化，常用关键词如 ease、linear、ease-in、ease-out、ease-in-out 实现不同节奏，cubic-bezier() 可自定义贝塞尔曲线实现弹性或过冲效果，结合场景选择合适曲线可提升动画流畅度与用户体验。

css过渡元素渐变曲线如何设置_transition timing-function与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 可以超出范围实现“回弹”或“过冲”效果。

常见自定义曲线示例：