CSS3 transition-timing-function 属性详解

核心知识点

什么是 transition-timing-function 属性？

transition-timing-function 是 CSS3 中用于控制过渡效果速度变化曲线的属性。它是 transition 简写属性的一部分，用于定义从一个属性值过渡到另一个属性值时的速度变化模式，如匀速、加速、减速等。

语法

/* 基本语法 */
transition-timing-function: <timing-function> [, <timing-function>]*;
  • &lt;timing-function&gt;: 过渡的时间函数，可以是预定义的关键字或自定义的贝塞尔曲线
  • 可以为多个属性指定不同的时间函数，用逗号分隔

预定义的时间函数

CSS3 提供了以下预定义的时间函数关键字：

  • linear: 匀速过渡，速度保持不变
  • ease: 默认值，先加速后减速，效果自然
  • ease-in: 逐渐加速，开始慢，结束快
  • ease-out: 逐渐减速，开始快，结束慢
  • ease-in-out: 先加速后减速，效果比 ease 更明显

自定义贝塞尔曲线

除了预定义的关键字，还可以使用 cubic-bezier() 函数创建自定义的贝塞尔曲线：

transition-timing-function: cubic-bezier(x1, y1, x2, y2);
  • x1, y1: 第一个控制点的坐标
  • x2, y2: 第二个控制点的坐标
  • 所有坐标值都应该在 [0, 1] 范围内

步进函数

CSS3 还支持使用 steps() 函数创建步进式过渡效果：

transition-timing-function: steps(n, <jumpterm>);
  • n: 步数，表示过渡将分为多少个步骤完成
  • &lt;jumpterm&gt;: 可选参数，表示步骤的起始位置，值为 start 或 end（默认）

浏览器兼容性

  • Chrome: 26+
  • Firefox: 16+
  • Safari: 6.1+
  • Edge: 10+

实用案例分析

案例 1: 预定义时间函数对比

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预定义时间函数对比</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            /* 基础过渡设置 */
            transition-property: transform;
            transition-duration: 1s;
        }
        
        .box:nth-child(1) {
            transition-timing-function: linear;
        }
        
        .box:nth-child(2) {
            transition-timing-function: ease;
        }
        
        .box:nth-child(3) {
            transition-timing-function: ease-in;
        }
        
        .box:nth-child(4) {
            transition-timing-function: ease-out;
        }
        
        .box:nth-child(5) {
            transition-timing-function: ease-in-out;
        }
        
        .container:hover .box {
            transform: translateX(200px);
        }
    </style>
</head>
<body>
    <h3>预定义时间函数对比</h3>
    <div class="container">
        <div class="box">linear</div>
        <div class="box">ease</div>
        <div class="box">ease-in</div>
        <div class="box">ease-out</div>
        <div class="box">ease-in-out</div>
    </div>
    <p>将鼠标悬停在容器上，观察不同时间函数的过渡效果差异</p>
</body>
</html>

效果分析:

  • 展示了 5 种预定义的时间函数：linear、ease、ease-in、ease-out、ease-in-out
  • 当鼠标悬停在容器上时，所有方块都会向右移动 200px
  • 不同时间函数产生不同的运动轨迹：
    • linear: 匀速运动，速度保持不变
    • ease: 先加速后减速，效果自然
    • ease-in: 逐渐加速，开始慢，结束快
    • ease-out: 逐渐减速，开始快，结束慢
    • ease-in-out: 先加速后减速，效果比 ease 更明显

案例 2: 自定义贝塞尔曲线

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义贝塞尔曲线</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #2196F3;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            /* 基础过渡设置 */
            transition-property: transform;
            transition-duration: 1s;
        }
        
        .box:nth-child(1) {
            transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* 弹性效果 */
        }
        
        .box:nth-child(2) {
            transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 弹跳效果 */
        }
        
        .box:nth-child(3) {
            transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 平滑效果 */
        }
        
        .container:hover .box {
            transform: translateY(-100px);
        }
    </style>
</head>
<body>
    <h3>自定义贝塞尔曲线效果</h3>
    <div class="container">
        <div class="box">弹性</div>
        <div class="box">弹跳</div>
        <div class="box">平滑</div>
    </div>
    <p>将鼠标悬停在容器上，观察不同自定义贝塞尔曲线的过渡效果</p>
</body>
</html>

效果分析:

  • 展示了 3 种自定义的贝塞尔曲线效果：弹性、弹跳和平滑
  • 当鼠标悬停在容器上时，所有方块都会向上移动 100px
  • 不同的贝塞尔曲线参数产生不同的运动效果：
    • 弹性效果：先快速移动，然后稍微反弹，最后缓慢到达终点
    • 弹跳效果：快速移动到终点后，会有明显的弹跳效果
    • 平滑效果：运动轨迹更加平滑自然

案例 3: 步进函数

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>步进函数</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #ff9800;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            /* 基础过渡设置 */
            transition-property: transform;
            transition-duration: 1s;
        }
        
        .box:nth-child(1) {
            transition-timing-function: steps(2, end); /* 2 步，结束时跳转 */
        }
        
        .box:nth-child(2) {
            transition-timing-function: steps(4, end); /* 4 步，结束时跳转 */
        }
        
        .box:nth-child(3) {
            transition-timing-function: steps(8, end); /* 8 步，结束时跳转 */
        }
        
        .container:hover .box {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <h3>步进函数效果</h3>
    <div class="container">
        <div class="box">2步</div>
        <div class="box">4步</div>
        <div class="box">8步</div>
    </div>
    <p>将鼠标悬停在容器上，观察不同步数的步进函数过渡效果</p>
</body>
</html>

效果分析:

  • 展示了 3 种不同步数的步进函数效果：2 步、4 步和 8 步
  • 当鼠标悬停在容器上时，所有方块都会旋转 360 度
  • 步数越多，过渡效果越平滑：
    • 2 步：旋转过程分为 2 个明显的步骤
    • 4 步：旋转过程分为 4 个步骤，比 2 步更平滑
    • 8 步：旋转过程分为 8 个步骤，接近平滑过渡效果

实际应用场景

1. 按钮交互效果

在按钮设计中，通常使用 ease 或 ease-out 时间函数，以创建自然的悬停效果，如背景颜色变化、缩放效果等。

2. 导航菜单效果

在导航菜单中，通常使用 ease-in-out 时间函数，以创建平滑的菜单展开/收起效果。

3. 卡片悬停效果

在卡片设计中，可以使用自定义的贝塞尔曲线，如 cubic-bezier(0.25, 0.46, 0.45, 0.94)，以创建更加平滑自然的悬停效果。

4. 游戏或动画效果

在需要特殊动画效果的场景中，如游戏界面、加载动画等，可以使用自定义的贝塞尔曲线或步进函数，以创建独特的视觉效果。

代码优化建议

1. 选择合适的时间函数

  • 根据交互类型选择：
    • 对于需要快速反馈的交互，使用 ease-out
    • 对于需要强调过程的交互，使用 ease-in-out
    • 对于需要机械感的交互，使用 linear 或步进函数

2. 性能考虑

  • 预定义函数 vs 自定义曲线：预定义的时间函数性能略优于自定义贝塞尔曲线，但差异很小
  • 步进函数的性能：步进函数的性能与预定义函数相当，步数越多，计算开销略微增加，但通常可以忽略

3. 与其他过渡属性的配合

transition-timing-function 通常与其他过渡相关属性一起使用：

  • transition-property：指定要过渡的属性
  • transition-duration：指定过渡的持续时间
  • transition-delay：指定过渡开始前的延迟时间

使用简写属性 transition 可以更简洁地设置这些属性：

/* 分别设置 */
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-delay: 0s;

/* 简写形式 */
transition: transform 0.3s ease-out;

4. 跨浏览器兼容性

  • 浏览器前缀：对于旧版本浏览器，可以使用浏览器前缀
  • 降级处理：对于不支持特定时间函数的浏览器，会默认使用 ease
/* 带浏览器前缀的过渡设置 */
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;

小结

  • transition-timing-function 属性用于控制过渡效果的速度变化曲线
  • 支持预定义的时间函数关键字：linear、ease、ease-in、ease-out、ease-in-out
  • 支持使用 cubic-bezier() 函数创建自定义的贝塞尔曲线
  • 支持使用 steps() 函数创建步进式过渡效果
  • 不同的时间函数适用于不同的交互场景，可以根据需要选择合适的时间函数
  • 合理使用时间函数可以使过渡效果更加自然、生动，提升用户体验

通过精心选择和调整 transition-timing-function 属性的值，可以创建出更加丰富多样的过渡效果，使网页的交互更加生动有趣，提升整体用户体验。

« 上一篇 CSS3 transition-duration 属性详解 下一篇 » CSS3 transition-delay 属性详解
↑