CSS过渡

Posted 2021-12-03 橘猫吃不胖～

CSS过渡

• 1.1 transition-property
• 1.2 transition-duration
• 1.3 transition-timing-function
• 1.4 transition-delay
• 1.5 transition
• 1.6 实例

1.1 transition-property

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

属性	描述
none	没有过渡效果
all	所有属性都可以获得过渡效果
property	指定采用过渡效果的属性名，若是多个属性用逗号隔开

1.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);

属性	含义
linear	线性过渡，相同速度开始至结束的过渡效果。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：	默认值，平滑过渡，以慢速开始，然后加快，最后慢慢结束。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：	由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out	由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out	由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(n, n, n, n)	特定的贝塞尔曲线类型，定义用于加速或者减速的贝塞尔曲线的形状，4个数值需在[0, 1]区间内

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;

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

1.6 实例

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

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

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;
}

过渡前，效果如下：

当鼠标移动到该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;
}