从之前的学习我们知道，CSS3动画效果包括3部分：变形（transform）、过渡（transition）、动画（animation）。上一章我们已经学习了CSS3变形，这一章再来学习一下CSS3过渡。

在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而来实现动画效果（请字斟句酌地理解这句话，非常重要）。

CSS变形（transform）呈现的仅仅是一个“结果”，而CSS过渡（transition）呈现的是一个“过程”。这个所谓的“过程”，通俗来说就是一种动画变化过程，如渐渐显示、渐渐隐藏、动画快慢等。绿叶学习网中很多地方都用到了CSS3过渡，当鼠标移到元素上时，都会有一定的过渡效果，小伙伴们可以去体验一下。

语法：

transition: 过渡属性 过渡时间 过渡方式 延迟时间;

说明：

transition是一个复合属性，主要包括4个子属性，如下表所示。

transition的子属性
属性 说明
transition-property 对元素的哪一个属性进行操作
transition-duration 过渡的持续时间
transition-timing-function 过渡的速率方式
transition-delay 过渡的延迟时间（可选参数）

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;
            padding:5px 10px;
            border-radius:5px;
            color:white;
            background-color:hotpink;
            cursor:pointer;
            transition:background-color 1s linear 0s;
        }
        div:hover
        {
            background-color:purple;
        }
    </style>
</head>
<body>
    <div>从0到1系列</div>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到div元素上，1秒钟后，预览效果如下图所示。

分析：

凡是涉及CSS3过渡，我们都是结合:hover伪类，来实现过渡效果，在这一章的学习中一定要记住这一点。

在这个例子中，“transition:background-color 1s linear 0s;”表示的是：当鼠标指针移动到元素上时，在1秒钟内让元素的背景颜色从粉色（hotpink）平滑过渡到紫色（purple），其中延迟时间为0秒。实际上这句代码可以等价于：

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

小伙伴们现在不理解没关系，这里只需要对其有个初步的认识即可。因为在接下来的章节中，我们会对transition的每一个子属性进行详细介绍。

常见问题：

1．什么是复合属性？

例如，我们常见的border属性就是一个复合属性，它是由border-width、border-style、border-color这3个子属性组成。