CSS过渡transition_transition 多个属性

1 过渡属性transition-property

transition-property属性用于指定应用过渡效果的CSS属性的名称。

2 过渡时间transition-duration

transition-duration属性：指定过渡效果花费的时间，默认值为0，单位是秒（s）或毫秒（ms）。

格式为：

transition-duration: time;
1

3 速度曲线transition-timing-function

transition-timing-function属性：设置过渡效果的速度曲线，默认值为“ease”。

格式为：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
1

4 延迟时间transition-delay

transition-delay属性：表示对象过渡的延迟时间（过渡效果的开始时间），默认值为0，单位是秒（s）或毫秒（ms）。
正数：过渡动作会延迟触发。
负数：过渡动作会从该时间点开始，之前的动作被截断。

格式为：

transition-delay:time;
1

5 综合属性transition

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。

格式为：

transition:property duration timing-function delay;
1

注意：使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。

6 实例

例如，.html文件中代码如下：

<div class="d1">橘猫吃不胖</div>
1

CSS样式如下：

.d1 {
    /* 设置初始盒子宽200像素，高200像素 */
    width: 200px;
    height: 200px;
    /* 设置边框为1像素，实线，红色 */
    border: 1px solid red;
}
.d1:hover {
    /* 设置过渡的属性，背景色，边框颜色，文字颜色 */
    transition-property: background-color, border-color, color;
    /* 设置过渡的时间为3秒 */
    transition-duration: 3s;
    /* 设置过渡速度曲线，由快到慢 */
    transition-timing-function: ease-out;
    /* 设置过渡延迟时间1秒 */
    transition-delay: 1s;
    /* 盒子边框颜色过渡为黑色 */
    border-color: black;
    /* 背景颜色设置成粉色 */
    background-color: orange;
    /* 文字颜色是橙色 */
    color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

过渡前，效果如下：

当鼠标移动到该div上后，1秒（已经设置好的延迟时间），会改变成如下效果：

或者用transition同时设置多个属性进行过渡，效果相同，CSS样式如下：

.d1 {
    /* 设置初始盒子宽200像素，高200像素 */
    width: 200px;
    height: 200px;
    /* 设置边框为1像素，实线，红色 */
    border: 1px solid red;
}
.d1:hover {
    /* 总体设置过渡属性、时间、速度曲线、延迟时间 */
    transition: background-color 3s ease-out 1s, color 3s ease-out 1s, border-color 3s ease-out 1s;
    /* 盒子边框颜色过渡为黑色 */
    border-color: black;
    /* 背景颜色设置成粉色 */
    background-color: orange;
    /* 文字颜色是橙色 */
    color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17