css 过度

我们知道，transform（变形）、transition（过渡）和animation（动画）是CSS3动画的3大部分。

在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果

CSS transform 属性所实现的元素变形，呈现的仅仅是一个“结果”，而CSS transition呈现的是一种过渡“过程”，通俗点说就是一种动画转换过程，如渐显、渐隐、动画快慢等。当鼠标移动上去的时候，都会有一定的过渡效果。

语法：

transition:属性持续时间过渡方法延迟时间;

其实transition属性是一个复合属性，主要包含4个子属性：

（1）transition-property：对元素的哪一个属性进行操作；
（2）transition-duration：过渡的持续时间；
（3）transition-timing-function：过渡使用的方法（函数）；
（4）transition-delay：可选属性，指定过渡开始出现的延迟时间；

举例：

 
<!doctype html>
<html>
<head>
    <title>css3过渡</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            padding:5px 10px;
            border-radius:5px;
            background-color:silver;
            cursor:pointer;
            transition:background-color 1s linear;
            -webkit-transition:background-color 1s linear;
            -moz-transition:background-color 1s linear;
            -o-transition:background-color 1s linear;
        }
        div:hover
        {
            background-color:#45b823;
        }
    </style>
</head>
<body>
    <div>css3教程</div>
</body>
</html>

在浏览器预览效果如下：

分析：

上面代码通过transition属性指定：当鼠标指针移动到div元素上时，在1秒钟内让div元素的背景色从灰色平滑过渡到浅绿色。其中lineaer是过渡函数。

上面，我们用一个例子让大家对CSS3过渡动画有一个感性的认知，在接下来的课程中，我们对transition-property 、transition-duration 、transition-timing-function和transition-delay这4个 transition子属性进行详细讲解。

 
transition:background-color 1s linear;

上面这句代码等价于：

 
transition-property:background-color;
transition-duration:1s ;
transition-timing-function:linear;
transition-delay:0;

CSS3过渡往往可以与CSS3变形一起使用，可以动态地展示变形的一个过程，丰富的动画效果。

返回CSS导航

css 过度