CSS3 过渡

CSS3 过渡功能允许 CSS 属性值的更改在指定的持续时间内平滑发生。

了解 CSS3 过渡

通常,当 CSS 属性的值发生更改时,渲染结果会立即更新。一个常见的例子是在鼠标悬停时更改按钮的背景颜色。在正常情况下,当你将光标放在按钮上时,按钮的背景颜色会立即从旧属性值更改为新属性值。

CSS3 引入了一种新的过渡功能,允许你随着时间的推移平滑地将属性从旧值动画到新值。以下示例将向你展示如何在鼠标悬停时为 HTML 按钮设置 background-color 动画。

button {
    background: #fd7c2a;
    /* For Safari 3.0+ */
    -webkit-transition-property: background;
    -webkit-transition-duration: 2s;
    /* Standard syntax */
    transition-property: background;
    transition-duration: 2s;
}
button:hover {
    background: #3cc16e;
}

你必须指定至少两个属性 transition-propertytransition-duration (大于 0)才能进行转换。但是,所有其他转换属性都是可选的,因为它们的默认值不会阻止转换发生。

CSS 属性的名称要使用的应用过渡效果-为了使过渡发生时,你必须指定至少两个 transition-property 使用 CSS 属性,以及过渡效果的持续时间(大于 0) transition-duration 的 CSS 属性。但是,所有其他转换属性都是可选的,因为它们的默认值不会阻止转换发生。

注意: 并非所有 CSS 属性都是​可动画的。通常,任何接受数字、长度、百分比或颜色值的 CSS 属性都是​可动画的。

执行多个转换

每个转换属性可以使用多个值,以逗号分隔,这提供了使用不同设置一次定义多个转换的简便方法。

button {
    background: #fd7c2a;
    border: 3px solid #dc5801;
    /* For Safari 3.0+ */
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 1s, 2s;
    /* Standard syntax */
    transition-property: background, border;
    transition-duration: 1s, 2s;
}
button:hover {
    background: #3cc16e;
    border-color: #288049;
}

过渡速记属性

应用转换时需要考虑许多属性。但是,也可以在一个属性中指定所有过渡属性以缩短代码。

transition 属性是用于设置所有单独的过渡特性的缩写属性(即 transition-propertytransition-durationtransition-timing-functiontransition-delay)。

使用此属性时,严格按照值的顺序是非常重要。

button {
    background: #fd7c2a;
    -webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
    transition: background 2s ease-in 0s; /* Standard syntax */
}
button:hover {
    background: #3cc16e;
}

注意: 如果缺少或未指定任何值,则将使用该属性的默认值。这意味着,如果 transition-duration 缺少属性值,则不会发生转换,因为其默认值为 0。

CSS3 过渡属性

下表提供了所有过渡属性的简要概述:

属性 描述
transition 用于在单个声明中设置所有四个单独过渡属性的简写属性。
transition-delay 指定转换何时开始。
transition-duration 指定转换动画完成所需的秒数或毫秒数。
transition-property 指定应应用过渡效果的 CSS 属性的名称。
transition-timing-function 指定如何计算受转换影响的 CSS 属性的中间值。