CSS transition-timing-function 属性

CSS transition-timing-function 语法

在 CSS 中，transition-timing-function 属性用于定义过渡效果的速度曲线，也就是在过渡时间内的速率变化方式。

语法：

transition-timing-function: 关键字或函数;

说明：

transition-timing-function 的关键字取值有 5 种，如下表所示。

transition-timing-function 属性取值
取值	说明	速率
ease（默认值）	由快到慢，逐渐变慢
linear	匀速
ease-in	速度越来越快
ease-out	速度越来越慢
ease-in-out	先加速后减速

transition-timing-function 属性的函数取值有以下 2 种。

steps()：定义分步动画。
cubic-bezier()：自定义的贝塞尔曲线。

如果 transition-timing-function 提供了多个值，它们会依次对应 transition-property 中列出的属性。如果值数量少于属性数量，多余的属性将使用默认值 ease。

注意: transition-timing-function 属性适用于所有元素。

CSS transition-timing-function 摘要

属于	CSS 过渡
使用频率	中
是否继承	否
默认值	ease
兼容性	查看
官方文档	查看
MDN	查看

CSS transition-timing-function 示例

接下来，我们通过一个简单的例子来讲解一下 transition-timing-function 属性是如何使用的。

示例：transition-timing-function 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-bottom: 10px;
            background-color: hotpink;
            transition-property: width;
            transition-duration: 2s ; 
            transition-delay: 0;
            cursor: pointer;
        }
        div:hover { width: 300px; }
        div:nth-of-type(1) { transition-timing-function: ease; }
        div:nth-of-type(2) { transition-timing-function: linear; }
        div:nth-of-type(3) { transition-timing-function: ease-in; }
        div:nth-of-type(4) { transition-timing-function: ease-out; }
        div:nth-of-type(5) { transition-timing-function: ease-in-out; }
    </style>
</head>
<body>
    <div>ease</div>
    <div>linear</div>
    <div>ease-in</div>
    <div>ease-out</div>
    <div>ease-in-out</div>
</body>
</html>

页面效果如下图所示。

transition-timing-function 示例

分析：

当鼠标移到元素上时，就会有渐变效果。小伙伴们可以自行试一下。

transition-timing-function 与 animation-timing-function

在 CSS 中，transition-timing-function 和 animation-timing-function 这两个属性看着非常相似，但它们的功能是不一样的。

transition-timing-function：定义的是 “过渡（transition）” 的速度曲线。
animation-timing-function：定义的是 “动画（animation）” 的速度曲线。

transition 是一个复合属性

在 CSS 中，transition 是一个复合属性，它包含以下子属性（如下表所示）。

transition 的子属性
子属性	说明
transition-property	操作的是哪个属性
transition-duration	过渡的 “持续时间”
transition-timing-function	过渡的 “速度曲线”
transition-delay	过渡的 “延迟时间”