CSS transition 属性

CSS transition 语法

在 CSS 中，transition 属性用于给元素定义过渡效果。

语法：

transition: property duration function delay;

说明：

property 表示操作的是哪个属性，duration 是持续时间，function 是过渡方式，delay 是延迟时间。

transition 是一个复合属性，它包含以下子属性。

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

下面 2 种方式是等价的，方式 1 使用的是复合属性，方式 2 使用的是子属性。

/* 方式1 */
transition: all 2s linear 0;

/* 方式2 */
transition-property: all
transition-duration: 2s
transition-timing-function: linear;
transition-delay: 0;

transition-delay 是一个可选属性，因此当 transition-delay 取值为 0 时，这个参数可以省略。下面两种方式是等价的。

/* 方式1 */
transition: all 2s linear 0;

/* 方式2 */
transition: all 2s linear;

注意:

transition 属性适用于所有元素。
只有可以进行数值计算的 CSS 属性才能应用过渡。例如 width、height、opacity、color、transform 等可以过渡，而 display、float 等则不能。

CSS transition 摘要

属于	CSS 过渡
使用频率	极高
是否继承	否
默认值	各子属性的默认值
兼容性	查看
官方文档	查看
MDN	查看

CSS transition 示例

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

示例：transition 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: hotpink;
            transition: all 0.5s linear;
        }
        div:hover {
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，效果如下图 1 所示。当鼠标移到 div 元素上时，元素会在 0.5 秒内慢慢过渡到如图 2 所示的效果。。

transition 基本用法1

transition 基本用法2

分析：

对于这个例子来说，transition: all 0.5s linear; 等价于下面代码。

transition-property: all
transition-duration: 0.5s
transition-timing-function: linear;
transition-delay: 0;