12.2　　CSS3提供的Transition动画

　　　　CSS3提供了Transition动画支持，Transition动画可以控制HTML组件的某个

　　　　　　属性发生改变时会经历一段时间、以平滑渐变的方式发生改变，这就产生了动画效果。

　　　　Transition动画通过transition属性来指定。transiton属性的值包括如下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、

　　　　　　　　　　　　　　　　　　　　　　等属性值。

　　　　　　transition-delay：指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变。

　　　　　　代码示范：

　　　　　　　　//设置当该元素背景色改变时执行渐变效果

　　　　　　　　div{

　　　　　　　　　　width:100px;

　　　　　　　　　　height:100px;

　　　　　　　　　　border:1px solid;

　　　　　　　　　　transition:background-color 4s linear;

　　　　　　　　}

　　　　　　　　//设置鼠标移到该元素上时改变该元素的背景色

　　　　　　　　div:hover{

　　　　　　　　　　　　　　background-color:yellow;

　　　　　　　　}

　　　　　　如要设置多种渐变效果，则用,号隔开。

　　　　　　代码示范：

　　　　　　　　//设置当该元素的left属性与top属性改变时执行渐变效果

　　　　　　　　#div1{

　　　　　　　　　　width:100px;

　　　　　　　　　　height:100px;

　　　　　　　　　　border:1px solid;

　　　　　　　　　　transition:left 5s linear,top 5s linear;

　　　　　　　　}

　　　　　　　　javascript代码：

　　　　　　　　//为鼠标按下事件绑定监听器

　　　　　　　　　　//获取执行渐变效果的元素　　　　　　　　　　

　　　　　　　　　　var itemDiv = document.getElementById("div1");

　　　　　　　　　　//记录div1元素的left属性。

　　　　　　　　　　itemDiv.style.left = "0px";

　　　　　　　　　　//记录div1元素的top属性。

　　　　　　　　　　itemDiv.style.top = "0px";

　　　　　　　　　　document.onmousedown = function(evt){

　　　　　　　　　　　　//将当前鼠标按下时的x坐标赋给div1元素的left属性改变其属性值与位置

　　　　　　　　　　　　target.style.left = evt.pageX + "px";

　　　　　　　　　　　　//将当前鼠标按下时的y坐标赋给div1元素的top属性改变其属性值与位置

　　　　　　　　　　　　target.style.top = evt.pageX + "px";

　　　　　　　　　　}