break-word; clear: both; text-indent: 28px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">给超链接设置样式时，一般都会设置一个悬停状态(hover)的效果，这种方法能明显地提醒用户他的鼠标指向的是一个超链接。
break-word; clear: both; text-indent: 28px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">
虽然对越来越多的触摸屏设备没太大用处，但这种方法对网站和用户之间的交互是非常简单实用的。通常，使用css时悬停状态就是一个开关。它默认有一个状态，然后在鼠标悬停时马上切换到另一种状态，其基本语法格式如下：
例6-1 example01.htm
这里只是在鼠标悬停时简单地修改了一下div的宽度。使用这段css代码，当鼠标悬停在按钮上面时，按钮会直接从第一种状态突变到第二种状态——就是一个开关效果。有没有办法让我们光标悬浮在元素时，元素宽度缓慢变宽呢?在CSS3之前我们只能使用麻烦的js脚本，现在我们只需要添加一个CSS3过渡属性（transition）就可以解决此种类型的需求，CSS3过渡可以让元素从一种状态慢慢转换到另一种状态。这种转换并不只局限于悬停状态。
在CSS中用于设置过渡特效的属性是transition，该属性允许css的属性值在一定的时间区间内平滑地过渡，这就摆脱了我们在CSS3版本标准之前对“JavaScript”和“Flash”的依赖，使页面的性能得以提升。这种效果可以在鼠标悬浮（:hover）、鼠标单击（:active）、表单元素获得焦点（:focus）或对元素任何改变以及在JavaScript中某些事件执行后触发，并圆滑（若不对时间曲线进行特殊设置）地以动画效果改变CSS的属性值。
在使用过渡属性（transition）时需要注意，该属性能够对css中绝大部分属性的变化生效，但不能对css属性值不为“数值”的属性生效，即只有当属性的值为一个数值的时候，该属性才能生效。数值包含“纯数字”、“像素数值”、“百分比数值”、“十六进制数值”等。如：当元素的宽度为“width:100px”变化为“width:200px”的时候过渡效果能够生效，但当元素的宽度为“width:100px”变化为“width:auto”的时候，就不会产生过渡效果了。当一个元素的字体颜色为“#f31e1d”，变化为“#2396fd”的时候过渡有效，但当它的字体颜色由“#f31e1d”变为“transparent（透明）”的时候过渡就不会产生效果了。该属性包含多个分支属性，主要有：“过渡css属性名称”、“过渡执行时间”、“过渡时间速率曲线”和“过渡的延时执行”四个主要内容，如图6-2所示。接下来我们对它的各分支属性进行详细的学习。
图6-2 transition分支属性
6.2.1 transition-property
过渡属性，该属性是用来指定当元素其中一个属性改变时执行的过渡动画效果，该属性有三种类型的值，如下表6-1所示：
表6-1 transition-property属性值
[property name]：指定一个或多个属性名称列表，以逗号“,”进行分隔，当指定的属性产生变化时，为其执行指定属性的动画过渡效果。而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的css属性主要有，如图6-3所示：
图6-3 具有过渡的css属性名称
6.2.2 transition-duration
过渡持续时间，该属性是用于设定一个属性的值过渡被触发开始时到结束时所需要经历的时间，单位为秒（s），如：“0.3s”或“.3s”，它的默认值为“0”，单位不能省略，否则过渡动画无法执行。设置过渡时间为 1 秒钟（transition-duration: 1s），如果是半秒钟可以设置为0.5s 。
6.2.3 transition-delay
过渡延迟，该属性规定在用户进行操作后多久开始执行动画，也就是延迟执行过渡动画的时间，单位同样是秒“s”，写法与“transition-duration”一致，默认值同样为“0”。
6.2.4transition-timing-function
过渡线性规律（又称时间曲线），该属性允许你根据时间的推进去改变属性值的变换速率，目前它能够设置6个类型的值，如图6-4所示：
图6-4 transition-timing-function属性的值
其中第6个类型的值为cubic-bezier([参数])，定义一个时间曲线（贝塞尔曲线），可以为其配置四个参数，前两个参数为“ x1 ”和“ x2 ”，定义“开始控制点”，后两个参数为“ y1 ”和“ y2 ”，定义“结束控制点”。而“开始点”和“结束点”是通过这两条“转换点控制轴”分别去调整两个点来实现曲线的变化的，如果对Photoshop里面的“钢笔工具”的“路径”比较熟悉的话，稍加联想应该能理解到这个时间曲线轴的改变原理，这种曲线叫做“贝塞尔曲线”。其基本语法格式如下：
每个点值只允许0~1的值，相当于0%到100%，p0与p3的值固定的，他们始终代表起点坐标(0,0)与终点坐标(1,1)。因此只需要设置p1,p2的点值就行了，通过案例6-2来体验,效果如图6-5所示。
例6-2 example02.html
图6-5 过渡线性规律
6.2.5 transition
过渡transition是个复合属性，它包括transition-property、transition-duration、transition-timing-function、transition-delay这四个属性，配合这四个属性才能完成一个完整的过渡动画效果，其基本语法格式如下：
1.例如如下代码所示：
2.如果每个样式都是统一的，直接使用 all
3.兼容浏览器的完整代码如下：
使用CSS3过渡实现元素缓慢变化效果，通过案例6-4来体验,效果如图6-6所示。
例6-3 example03.html
代码运行效果如图5-6所示注：
图6-6 过渡实现元素缓慢变化
注意：
在transition的这四个属性中，只有transition-duration是必需且不能为0的，transition-duration与transition-delay都表示时间，当这两个放在一起的时候，第一个是transition-duration，第二个是transition-delay，当只有一个时，表示的是transition-duration，transition-delay默认值是0。
1.当有两个时间时, 其基本语法格式如下：
2.当只有一个时间时, 其基本语法格式如下：
3.单个属性的变化, 其基本语法格式如下：
4.多个属性的变化-->单独设置, 通过案例6-4来体验,效果如图6-7所示。
例6-4 example04.html
图6-7 CSS3过渡多个属性的变化【方形变圆形】
5.多个属性的变化-->all，通过案例6-5来体验,效果如图6-8所示。
例6-5 example05.html
图6-8 CSS3属性transition-property的值设置为all的应用
特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。用一个简单的例子来说明这个问题：假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
通过案例6-6来体验实现类似小米官网上的鼠标移动去改变背景颜色，盒子的动态放大缩小,效果如图6-9所示。
例6-6 example06.html
图6-9 CSS3属性transition过渡实现div放大与缩小
