CSS过渡效果

本文将介绍样式中的过渡（transition）效果，其功能是元素在转换到某一状态时生成的动画效果。下面先来看几个相关的CSS属性。

transition-property属性，指定过渡的CSS样式属性名，默认值为none，表示所在样式属性不变化。指定多个变化的属性名称时，使用逗号分隔，使用all关键字表示所有样式进行过渡转换。

transition-duration属性，指定过渡完成的时间，如1s表示1秒。

transition-delay属性，指定过渡延迟时间。

transition-timing-function属性，指定动画过程的节奏，其常用属性值包括：

ease，默认值。
linear，匀速。
ease-in-out，开始较慢，然后加速，最后又慢下来。
ease-in，开始较慢，然后匀速。
ease-out，开始匀速，然后慢下来。

此外，transition-timing-function属性还可以使用函数定义过渡效果，如：

cubic-bezier()，使用贝塞尔曲线变换，需要四个参数。
step()函数，参数一指定变换需要几个步骤，参数二指定是开始（start）还是结束（end）改变属性。

transition属性，组合变换参数。属性值顺序可以使用transition-property、transition-timing-function、transition-delay。

下面来看一些过渡效果的演示，如下面的代码。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #btn1 {
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease-in-out;
            background-color: gray;
            padding: 0.5em 1.5em;
            color: #333;
            background-image: linear-gradient(#fafafa,orange);
            border: 1px solid #f3f3f3;
            border-radius: 1.5em;
        }
         #btn1:hover {
            transition-property: all;
            transition-duration:0.3s;
            transition-timing-function:ease-in-out;
            color:white;
            background-image:linear-gradient(navy,#fafafa);
        }
    </style>
</head>
<body>
    <button id="btn1">测试按钮</button>
</body>
</html>

本例，当鼠标移到到btn1按钮时，其样式会使用0.3秒进行过渡，当鼠标离开btn1按钮时，又会使用0.3秒恢复到默认样式。下图显示了原始样式和转变后的样式对比，过渡时的动画效果需要在浏览器中实际观察。

按钮样式过渡