CSS 过渡 - 绿叶网

CSS 过渡属性

在 CSS3 中，我们可以使用 transition 属性来将元素的某一个属性从 “一个属性值” 在指定的时间内平滑地过渡到 “另一个属性值” ，从而来实现动画效果（请字斟句酌地理解这句话，非常重要）。

CSS 变换（transform）呈现的仅仅是一个 “结果”，而 CSS 过渡（transition）呈现的是一个 “过程”。这个所谓的 “过程”，通俗来说就是一种动画变化过程，如渐渐显示、渐渐隐藏、动画快慢等。绿叶网中很多地方都用到了 CSS3 过渡，当鼠标移到元素上时，都会有一定的过渡效果，小伙伴们可以去体验一下。

语法：

transition: property duration timing-function delay;

说明：

transition 是一个复合属性，主要包括 4 个子属性，如下表所示。

transition 的子属性
属性	说明
transition-property	对元素的哪一个属性进行操作
transition-duration	过渡的持续时间
transition-timing-function	过渡的速率方式
transition-delay	过渡的延迟时间（可选参数）

如果用中文表示，那么 transition 取值应该为：

transition: 过渡属性 过渡时间 速率方式 延迟时间;

1. transition-property

transition-property 属性用于指定应用过渡效果的 CSS 属性名称。它可以是 all，表示所有属性都应用过渡效果。也可以是具体的 CSS 属性名称，比如 width、height、background-color 等。

2. transition-duration

transition-duration 属性用于指定过渡效果的持续时间。它的取值是一个时间值，单位可以是秒（s）或毫秒（ms）。例如，transition-duration: 0.5s; 表示过渡效果的持续时间为 0.5 秒。

3. transition-timing-function

timing-function 属性用于指定过渡效果的时间函数。时间函数决定了过渡效果的速度曲线，可以让过渡效果看起来更加自然。它常用的取值有以下几种。

linear：匀速地过渡。
ease（默认值）：先加速后减速地过渡。
ease-in：加速地过渡。
ease-out：减速地过渡。
ease-in-out：先加速后减速再加速地过渡。

4. transition-delay

transition-delay 属性用于指定过渡效果的延迟时间。它的取值也是一个时间值，单位可以是秒（s）或毫秒（ms）。例如，transition-delay: 0.2s; 表示过渡效果在 0.2 秒后开始执行。

CSS 过渡示例

接下来，我们通过几个简单的例子来讲解 CSS 过渡是如何使用的。

示例 1：CSS 定义 “宽度” 的过渡效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            /* 定义过渡效果 */
            transition-property: width;
            transition-duration: 1s;
            transition-timing-function: linear;
        }
        div:hover {
            width: 300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上，过了 1 秒钟后，页面效果如下图 2 所示。

CSS 定义 “宽度” 的过渡效果 1

CSS 定义 “宽度” 的过渡效果 2

分析：

凡是涉及 CSS3 过渡，我们都是结合 :hover 伪类来实现过渡效果，小伙伴们要记住这一点。

在这个例子中，我们定义了 div 元素的宽度过渡效果。当鼠标移到 div 元素上时，div 元素的宽度会从 100px 平滑地过渡到 300px，过渡效果的持续时间为 1 秒，过渡方式为 linear（线性）。

示例 2：CSS 同时定义 “背景颜色” 和 “圆角” 的过渡效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            /* 定义多个过渡效果 */
            transition-property: background-color, border-radius;
            transition-duration: 0.5s, 0.5s;
            transition-timing-function: ease-in-out, ease-in-out;
        }
        div:hover {
            background-color: lightskyblue;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上，过了 0.5 秒钟后，页面效果如下图 2 所示。

CSS 同时定义 “背景颜色” 和 “圆角” 的过渡效果 1

CSS 同时定义 “背景颜色” 和 “圆角” 的过渡效果 2

分析：

在这个例子中，我们定义了 div 元素的背景颜色和圆角的过渡效果。当鼠标移到 div 元素上时，div 元素的 background-color 会从蓝色平滑地过渡到绿色，而 border-radius 会从 10px 平滑地过渡到 50%，过渡效果的持续时间都为 0.5 秒，速率方式都是 ease-in-out。

示例 3：CSS 定义 “透明度” 的过渡效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            opacity: 1;
            /* 定义透明度过渡效果 */
            transition: opacity 1s linear;
        }
        div:hover {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上，过了 1 秒钟后，页面效果如下图 2 所示。

CSS 定义 “透明度” 的过渡效果 1

CSS 定义 “透明度” 的过渡效果 2

分析：

在这个例子中，我们使用了 transition 的复合写法来定义 div 元素的透明度过渡效果。当鼠标悬停在 div 元素上时，div 元素的透明度会从 1 平滑地过渡到 0.5，过渡效果的持续时间为 1 秒，速率方式为 linear。

实际上，transition: opacity 1s linear; 是一种简写方式，它等价于：

transition-property: opacity;        /* 过渡属性 */
transition-duration: 1s;             /* 过渡时间 */
transition-timing-function: linear;     /* 速率方式 */
transition-delay: 0s;                /* 延迟时间（可选，默认 0） */