CSS transition-property 属性

CSS transition-property 语法

在 CSS 中，transition-property 属性用于定义过渡效果操作的是哪一个 CSS 属性。

语法：

transition-property: all 或 none;
transition-property: 属性名;
transition-property: 属性名1, 属性名2, ..., 属性名n;

说明：

当 transition-property 属性取值为 all 时，它会自动判断哪些属性值发生了改变。

当 transition-property 属性取值为 none 时，表示不指定任何属性。设置此值将不会发生任何过渡效果，经常用于通过 JavaScript 临时禁用过渡。

注意:

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

CSS transition-property 摘要

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

CSS transition-property 示例

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

示例 1：transition-property 用于单个属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: hotpink;
            transition-property: height;
            transition-duration: 0.5s ;
            transition-timing-function: linear;
            transition-delay: 0s;
            cursor: pointer;
        }
        div:hover {
            height:100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

transition-property用于单个属性1

transition-property用于单个属性2

分析：

transition-property:height; 用于指定过渡效果所操作的属性是 height。当鼠标移到元素上时，元素的 height 会在 0.5 秒内从 50px 平滑过渡到 100px。当然，小伙伴们可以自行测试一下其他属性，看看效果如何。

示例 2：transition-property 用于多个属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: hotpink;
            transition-property: height, background-color;
            transition-duration: 0.5s ;
            transition-timing-function: linear;
            transition-delay: 0s;
            cursor: pointer;
        }
        div:hover {
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

transition-property用于多个属性1

transition-property用于多个属性2

分析：

transition-property: height, background-color; 表示过渡效果操作的是 height 和 background-color 这 2 个属性。

示例 3：transition-property: all;

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: hotpink;
            transition-property: all;
            transition-duration: 0.5s ;
            transition-timing-function: linear;
            transition-delay: 0s;
            cursor: pointer;
        }
        div:hover {
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

transition-property: all; 效果1

transition-property: all; 效果2

分析：

当 transition-property 取值为 all 时，CSS 会自动判断过渡效果操作的是哪些属性，这种方式在实际开发中用得最多。

提示: 虽然 all 写起来很方便，但在复杂动画中，建议显式列出需要过渡的属性（如 width, height），这样能减轻浏览器的计算负担。

transition 是一个复合属性

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

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