在这一节中，我们带大家深入去了解一下transition属性。这一节涉及的技巧非常重要，都是精华中的精华，在其他书中你未必能看到，所以小伙伴们一定要认真理解和掌握。

一、transition-property取值为all

在之前的章节中，我们都是仅仅针对一个CSS属性来实现过渡效果。实际上，我们可以使用transition属性同时对多个CSS属性来实现过渡效果，请看下面的例子。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            border-radius:0;
            background-color:lightskyblue;
            transition-property:border-radius,background-color;
            transition-duration:1s;
            transition-timing-function:linear;
            transition-delay: 0s;
        }
        div:hover
        {
            border-radius:50px;
            background-color:hotpink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

当鼠标移到元素上时，元素会慢慢过渡到图20-12所示的效果。

分析：

当鼠标移动到元素上时，会在1秒钟内同时对border-radius和background-color这两个属性产生过渡效果。

在实际开发中，当有多个CSS属性进行过渡效果时，我们很少使用transition-property:border-radius,background-color;这种方式，而是更倾向于直接定义transition-property属性取值为all就可以了。

当transition-property属性定义为all时，CSS3会自动判断哪些属性是作为过渡效果的属性，相对来说更加简单方便。

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

上面这段代码可以等价于：

transition:all 1s linear 0s;

二、transition-delay的省略

由于transition-delay属性是一个可选属性，因此当transition-delay取值为0s时，这个参数可以省略。

transition:all 1s linear 0s;

也就是说，上面这句代码可以等价于：

transition:all 1s linear;

在实际开发中，大多数情况下我们都是使用这种省略形式。

三、transition属性的位置

凡是涉及CSS3过渡，我们都是结合:hover伪类来实现过渡效果的，语法形式大致如下：

element
{
    //原始值
    transition: all 1s linear
}
element:hover
{
    //最终值
}

之前我们都是把transition: all 1s linear;写在普通状态内，而不是写放在悬浮状态（即:hover{}）中。那么transition属性放在这两个地方究竟有什么不同呢？ 先来看一个例子。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            border-radius:0;
            background-color:lightskyblue;
        }
        div:hover
        {
            border-radius:50px;
            background-color:hotpink;
            /*transition属性放到:hover{}中*/
            transition:all 0.5s linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

当鼠标移到元素上时，元素会慢慢过渡到图20-14所示的效果。

分析：

我们尝试把transition属性分别写在“普通状态”和“悬浮状态”内，然后对比两种方式，就可以很直观地知道两者的不同了：移入时效果两者没有区别，但是如果把transition属性写在普通状态内的话，移出时会有过渡效果；如果把transition属性写在悬浮状态内的话，移出时没有过渡效果。在实际开发中，我们应该根据实际需求来选择使用哪一种方式，而不是笼统地把transition属性写在普通状态。

此外，过渡效果可以说是CSS3中最重要的内容。因此在接下来的几节中，我们会列举大量实际开发案例，以帮助大家更好地消化和吸收，希望小伙伴们把每一个例子都琢磨透。