CSS3 过渡效果

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

了解CSS3过渡

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

CSS3引入了一项新的过渡功能，使您可以随时间平滑地将属性从旧值动画化为新值。

以下示例将向您展示如何background-color在鼠标悬停时对HTML按钮的动画。

示例

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

测试看看‹/›

您必须至少指定两个属性transition-property和transition-duration（大于0），以使它们产生过渡效果。但是，所有其他过渡属性都是可选的，因为它们的默认值不会阻止过渡的发生。

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

执行多次转换

每个过渡属性都可以采用多个值，并用逗号分隔，这提供了一种轻松的方法来一次定义具有不同设置的多个过渡。

示例

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

测试看看‹/›

过渡简写属性

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

过渡属性是一种简写属性，用于按列出的顺序一次设置所有单个过渡属性（即缩写属性transition-property，transition-duration，transition-timing-function和transition-delay在所列出的顺序）。

使用此属性时，请务必对值遵循此顺序。

示例

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

测试看看‹/›

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

CSS3过渡属性

下表简要概述了所有过渡属性：

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