CSS transition属性的用法（附带实例）

CSS 中的过渡（transition）可以在元素的两个状态之间自动生成动画效果。

接下来先了解几个关于过渡的属性：

transition-property 属性：指定参与生成过渡动画的 CSS 属性名称，多个属性名使用逗号分隔，如果元素的所有 CSS 属性都包含在过渡效果中，可以使用 all 值；如果样式都不使用过渡效果，则使用 none 值。
transition-duration 属性：指定过渡动画完成的时间，如 0.5s 表示半秒。
transition-timing-function 属性：设置过渡的节奏，常用的值包括：
- ease，默认值；
- linear，匀速；
- ease-in-out，开始较慢，接着加速，再慢下来；
- ease-in，开始较慢，然后匀速；
- ease-out，开始匀速，然后慢下来；

下面的代码演示了这三个属性的应用：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin: 30px;
        }
        #div2 {
            transition-property: all;
            transition-timing-function: linear;
            transition-duration: 0.5s;
        }
        #div2:hover {
            background-color: steelblue;
            transform: scale(1.2);
            transition-property: all;
            transition-timing-function: linear;
            transition-duration: 0.5s;
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>
</html>

div2 元素中使用了 :hover 伪类，当鼠标指针移动到 div2 元素时，会经过 0.5s 的时间由灰色变成 steelblue 色，并放大 1.2 倍；当鼠标指针离开 div2 元素时，则经过 0.5s 的时间恢复原状。

如果在 #div2 样式声明中不设置过渡，在鼠标离开 div2 元素时，会瞬间恢复原状。

此外，transition-delay 属性指定过渡延迟时间。在 transition-timing-function 属性中，还可以使用如下函数来定义过渡的效果：

cubic-bezier()：根据贝塞尔曲线数据变换，需要指定两个点的坐标；
step()：参数一指定切分为几个步骤；参数二指定是开始（start）时还是结束（end）时改变属性。

对于过渡效果，还可以使用 transition 属性进行组合数据设置，如：

transition:all linear 0.5s;

过渡会产生动画，这里没办法提供具体的执行效果，大家需要多尝试不同的属性值，并在浏览器中观察实际的运行效果。

CSS transition属性的用法（附带实例）

相关文章