CSS 3提供的Transition动画
CSS 3提供了Transition动画支持，Transition动画可以控制HTML组件的某个属性发生改变时会经历一段时间、以平滑渐变的方式发生改变，这就产生了动画效果。
Transition动画通过transition属性来指定。transition属性的值包括如下4个部分。
➢ transition-property：指定对HTML元素的哪个CSS属性进行平滑渐变处理。该属性可以指定background-color、width、height等各种标准的CSS属性。
➢ transition-duration：指定属性平滑渐变的持续时间。
➢ transition-timing-function：指定渐变的速度。该部分支持如下几个值。
□ ease：动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。
□ linear：线性速度。动画开始时的速度到结束时的速度保持不变。
□ ease-in：动画开始时速度较慢，然后速度加快。
□ ease-out：动画开始时速度很快，然后速度减慢。
□ ease-in-out：动画开始时速度较慢，然后速度加快，到达最大速度后再减慢速度。
□ cubic-bezier(x1, y1, x2, y2)：通过贝济埃曲线来控制动画的速度。该属性值完全可以代替ease、linear、ease-in、ease-out、ease-in-out等属性值。
➢ transition-delay：指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变。
提示
需要指出的是，目前各主流浏览器暂未支持transition属性，因此在实际开发中还需要添加各浏览器厂商的前缀，例如-moz-、-webkit-、-o-等前缀。下面页面代码示范了如何通过transition属性来实现动画。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 背景色变化 </title>
<style type="text/css">
div {
width: 400px;
height: 50px;
border: 1px solid black;
background-color: red;
padding: 10px;
-moz-transition: background-color 4s linear;
-webkit-transition: background-color 4s linear;
-o-transition: background-color 4s linear;
}
div:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div>鼠标移上来会发生颜色渐变</div>
</body>
</html>
多个属性同时渐变
transition属性可以同时指定多组property duration time-function delay值，每组property duration time-function delay值控制一个属性值的渐变效果。
通过多个属性同时渐变可以非常方便地开发出动画效果。假如我们想实现一个在页面上随鼠标漂移的气球——控制气球移动主要是修改气球图片的left、top两个属性值，让这两个属性值等于鼠标按下的X、Y坐标即可。如果再设置气球图片的left、top CSS属性不是突然改变，而是以平滑渐变的方式来进行，这就是动画了。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 漂浮的气球 </title>
<style type="text/css">
img#target {
position: absolute;
/* 指定气球图片的left、top属性会采用平滑渐变的方式来改变 */
-moz-transition: left 5s linear , top 5s linear;
-webkit-transition: left 5s linear , top 5s linear;
-o-transition: left 5s linear , top 5s linear;
}
</style>
</head>
<body>
<img id="target" src="balloon.gif" alt="气球"/>
<script type="text/javascript">
var target = document.getElementById("target");
target.style.left = "0px";
target.style.top = "0px";
// 为鼠标按下事件绑定监听器
document.onmousedown = function(evt)
{
// 将鼠标事件的X、Y坐标赋给气球图片的left、top。
target.style.left = evt.pageX + "px";
target.style.top = evt.pageY + "px";
}
</script>
</body>
</html>
图片
例子
除了以平滑渐变的方式改变位置之外，也可以同时修改HTML的宽度、高度、背景色等。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> Transition动画 </title>
<style type="text/css">
div {
width: 200px;
height: 160px;
background-color: red;
/* 指定背景色、宽度、高度会以平滑简便的方式来改变
指定动画持续时间为2秒，动画会延迟2秒之后才启动。
*/
-moz-transition: background-color 2s linear 2s,
width 2s linear 2s, height 2s linear 2s;
-webkit-transition: background-color 2s linear 2s,
width 2s linear 2s, height 2s linear 2s;
-o-transition: background-color 2s linear 2s,
width 2s linear 2s, height 2s linear 2s;
}
</style>
<script type="text/javascript">
// 定义目标组件的初始宽度、高度
var originWidth = 200;
var originHeight = 160;
var zoom = function(scale , bgColor)
{
var target = document.getElementById("target");
// 设置缩放之后的宽度、高度
target.style.width = originWidth * scale + "px";
target.style.height = originHeight * scale + "px";
// 设置背景色
target.style.backgroundColor = bgColor;
}
</script>
</head>
<body>
<button onclick="zoom(2 , 'blue');">放大</button>
<button onclick="zoom(0.5 , 'green');">缩小</button>
<button onclick="zoom(1 , 'red');">恢复</button>
<div id="target">
</div>
</body>
</html>
指定动画速度
指定transition属性时可通过transition-timing-function设置属性变化的速度，这个值的本质是通过一条贝济埃曲线来控制目标属性的改变。
下图显示了动画速度的计算方式。
上图中黑色的贝济埃曲线代表了目标属性与流逝时间的关系，左下角的原点处代表属性还未开始改变，时间也还未流逝；右上角的1.0、1.0处则代表属性已改变完成，时间也耗尽。曲线中间各点的横坐标代表在不同的时间点上，纵坐标代表目标属性在当前时间点的值。 transition-timing-function值可通过cubic-bezier(x1,y1, x2, y2)来指定，该函数中的x1、y1用于确定上图中P1的坐标，x2、y2则用于确定上图中P2的坐标，一旦确定了P1、P2的位置，这条贝济埃曲线就可以确定下来，这样系统就可以根据这条曲线来确定目标属性的改变速度。
实际上，前面介绍的几种改变速度都只是cubic-bezier(x1,y1, x2, y2)的应用。
➢ ease：相当于cubic-bezier(0.25, 0.1, 0.25, 1.0)。
➢ linear：相当于cubic-bezier(0.0, 0.0, 1.0, 1.0)。
➢ ase-in：相当于cubic-bezier(0.42, 0, 1.0, 1.0)。
➢ ease-out：相当于cubic-bezier(0, 0, 0.58, 1.0)。
➢ ease-in-out：相当于cubic-bezier(0.42, 0, 0.58, 1.0)。
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。