Transitions功能的使用方法
在CSS 3中，Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能，可通过transition属性来使用Transitions功能。transition属性的使用方法如下所示：
transition: property duration timing-function
其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。
接下来，我们在代码清单19-1中看一个Transitions功能的使用示例。该页面中有一个div元素，背景色为绿色，通过hover属性指定当鼠标指针停留在div元素上时的背景色为橙色，通过transition属性指定：当鼠标指针移动到div元素上时，在1秒钟内让div元素的背景色从绿色平滑过渡到橙色。
代码清单19-1 Transitions功能的使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.transition1 {
width: 300px;
height: 100px;
line-height: 100px;
margin: 0 auto 20px;
color: white;
text-align: center;
background-color: green;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.transition1:hover {
background-color: orange;
}
</style>
</head>
<body>
<div class="transition1">示例文字</div>
</body>
</html>
代码清单19-1所示代码的运行结果如下所示：
在CSS 3中，还有另外一种使用Transitions功能的方法，就是将transition属性中的三个参数改写成transition-property属性、transition-duration属性、transition-timing-function属性，这三个属性的含义及属性值的指定方法与transition属性中的三个参数的含义及指定方法完全相同，样式代码类似于如下代码。
<style type="text/css"> -webkit-transition-property: background-color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -moz-transition-property: background-color; -moz-transition-duration: 1s; -moz-transition-timing-function: linear; -o-transition-property: background-color; -o-transition-duration: 1s; -o-transition-timing-function: linear; </style>