今天再向大家介绍CSS3的一个经典——动画属性：Transitions。Transitions有三个参数property、duration、timing-function。

Property：表示某属性名称，即将要设置动画的那个属性，如background、color、height、width等；

Duration：表示动画执行时间，即将在多少时间内完成动画，如0.5s表示半秒，1s表示1秒；

Timing-function：表示执行动画的种类，可理解为过度效果，比如linear(匀速渐变)、ease-in(由慢到快渐变)、ease-out(由快到慢渐变)等。

来实例说明下：有一段落p，背景色为红色，字体为白色，现在要实现一个动画效果是，当鼠标悬停到此段落p上时，在2秒时间完成背景色渐变为黑色的动画。应该这么写：

p {

background:#f00;

-webkit-transition:background 2s linear;

-moz-transition:background 2s linear;

-o-transition:background 2s linear;

-ms-transition:background 2s linear;

transition:background 2s linear;

color:#fff;

}

p:hover {background:#000;}

* 注意：此属性在不同浏览器下需要带有不同的前缀（例如-webkit-****等）

另外，Transitions属性中的三个参数是可以拆开表达的，就好比我们常见的background能拆分成background-image、background-repeat、background-position等一样的道理。因此例子中的“transition:background 2s linear;”可以这样写：

transition-property:background;

transition-duration:2s;

transition-timing-funcion:linear;

上面例子中，我们是做了背景色这一个属性变化的动画，那如果是多种属性同时变化的动画该怎么来实现呢？这也就是下面将介绍的组合动画。

Elements {transitions:property1 duration timing-funcion, transitions:property2 duration timing-funcion, …, transitions:propertyN duration timing-funcion;}

很容易理解吧，下面结合前面学的transform变形属性做了一个超炫的组合动画，即实现图1到变成图2的旋转动画：

源码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  5. <title>CSS3动画属性之Transitions</title>
  6. <style type=”text/css”>
  7. *{margin:0; padding:0;}
  8. body {font-size:10px; font-family:”微软雅黑”; text-align:center;}
  9. #demo {
  10. margin:-70px 0 0 -70px;
  11. top:50%;
  12. left:50%;
  13. width:140px;
  14. height:140px;
  15. line-height:140px;
  16. background:#6F6;
  17. color:#000;
  18. border:5px #fff solid;
  19. border-radius:75px;
  20. box-shadow:0 0 10px #690;
  21. overflow:hidden;
  22. position:absolute;
  23. -webkit-transition:
  24. margin 2s linear,
  25. width 2s linear,
  26. height 2s linear,
  27. font-size 2s linear,
  28. line-height 2s linear,
  29. background 2s linear,
  30. color 2s linear,
  31. border 2s linear,
  32. border-radius 2s linear,
  33. box-shadow 2s linear,
  34. -webkit-transform 2s linear;
  35. -moz-transition:
  36. margin 2s linear,
  37. width 2s linear,
  38. height 2s linear,
  39. font-size 2s linear,
  40. line-height 2s linear,
  41. background 2s linear,
  42. color 2s linear,
  43. border 2s linear,
  44. border-radius 2s linear,
  45. box-shadow 2s linear,
  46. -moz-transform 2s linear;
  47. -o-transition:
  48. margin 2s linear,
  49. width 2s linear,
  50. height 2s linear,
  51. font-size 2s linear,
  52. line-height 2s linear,
  53. background 2s linear,
  54. color 2s linear,
  55. border 2s linear,
  56. border-radius 2s linear,
  57. box-shadow 2s linear,
  58. -o-transform 2s linear;
  59. }
  60. #demo:hover {
  61. margin:-150px 0 0 -150px;
  62. width:300px;
  63. height:300px;
  64. font-size:22px;
  65. line-height:300px;
  66. background:#606;
  67. color:#fff;
  68. border:10px #d1d1d1 solid;
  69. border-radius:160px;
  70. box-shadow:0 0 20px #636;
  71. -webkit-transform:rotate(720deg);
  72. -moz-transform:rotate(720deg);
  73. -o-transform:rotate(720deg);
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <div id=”demo”>CSS3动画属性之Transitions</div>
  79. </body>
  80. </html>