CSS3动画之一：Transitions功能_H5之家 - 中国HTML5教程资源分享第一站

　在页面里加入些动画，可以是页面更加生动活泼，使用CSS3的动画功能，可以使页面上的文字或图像具有动画功能。比如说背景色从一种颜色，平滑的过度到另一种颜色。CSS3中的动画功能有两种，Transitions和Animations。这两种功能都可以通过改变CSS中的属性值来产生动画效果。本文简单介绍一下Transitions功能的使用方法。

　　到目前为止，支持CSS3中的Transitions功能的浏览器有：Firefox 4+ 、Opera 10+、Safari 3.1+、Chrome 8+等，transitions属性的使用方法如下：

　　transition: property duration timing-function

　　但是，在书写CSS代码的时候，如果是Firefox浏览器，需要书写成“-moz-transition”的形式；如果是Opera浏览器，需要书写成“-o-transition”的形式；如果是Safari或者Chrome浏览器，则写成“-webkit-transition”的形式。

　　前面说了，Transitions和Animations都是通过改变CSS中属性的值来产生动画效果的，所以，property表示需要改变的属性， duration表示在多长时间内完成动画，也就是动画执行的时间，timing-function表示通过神马方法进行动画。

　　下面看一个例子来演示一下Transitions功能的动画效果，页面中一个div元素，背景色为黄色，用过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，通过transition属性指定：当鼠标指针移动到div元素上时，在1s钟内div元素的背景色从黄色平滑过渡到浅蓝色。

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8" />
          <title>Transitions功能用法</title>
          <style>
          div { 
              background-color: #ff0;
              -webkit-transition: background-color 1s linear;
             -moz-transition: background-color 1s linear;
             -o-transition: background-color 1s linear;
         }
         div:hover {
             background-color: #0ff;
         }
         </style>
     </head>
     <body>
         <div>鼠标放上来，看我的背景色</div>
     </body>
 </html>

　　可以看到，当鼠标移到div元素上时，背景色从黄色变绿色然后边浅蓝色，这样的平滑过渡效果，在CSS2中一般可以用jQuery去实现。如今采用CSS3的Transitions功能就方便多了。

　　还有一种用法，就是把transition的三个属性分开写，写成: transition-proterty属性, transition-duration属性, transition-timing-function属性。这三个属性的指定方法与含义与transition属性中的三个参数的含义及指定方法完全相同，是一样的。代码如下

transition-property: background-color;

transition-duration: 1s;

transition-timing-function: linear;

　　当然，针对不同的浏览器，前面要加上相应的前缀。在这儿就不一一写出了。

刚才这个例子只是改变了一个属性值，那么Transitions功能可不可以同时改变多个属性值呢？当然可以，why not？下面把刚才的例子稍微修改一下：一个div元素，背景色为黄色，字体颜色为黑色，宽度为400px，通过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，字体为白色，宽度增加到500px。通过transition属性指定当鼠标指针移到到div元素上时在1s钟的时间内完成这几个属性值的变化即平滑过渡。

代码清单：

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8" />
          <title>Transitions功能用法</title>
          <style>
          div { 
              background-color: #ff0;
              color: #000;
             width: 400px;
             -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
             -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
             -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
         }
         div:hover {
             background-color: #0ff;
             color: #fff;
             width: 500px;
         }
         </style>
     </head>
     <body>
         <div>鼠标放上来，看我的背景色,文字颜色和宽度</div>
     </body>
 </html>

　　和预计的一样，背景色平滑过渡的时候，文字颜色也在平滑过渡，而宽度也渐渐的从400px变为500px。比起以前直接hover是不是炫多了？

使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后再这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果，在CSS3中，除了Transitions功能外，还可以使用Animations功能实现动画效果，它允许通过关键帧的指定在页面上实现更为复杂的动画效果。