CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单 的动画效果而不需要再去借助 JavaScript 。
CSS3动画的属性主要分为三类: transform 、 transition 以及 animation 。
transform rotate设置元素顺时针旋转的角度，用法是:transform: rotate(x);参数x 必须是以deg 结尾的角度数或0,可为负数表示反向scale设置元素放大或缩小的倍数，用法包括:transform: skewX(a);元素 x 方向逆时针倾斜角度 a ，y 方向不变 transform: scale(a);元素x 和y 方向均缩放a 倍 transform: scale(a, b);transform: scaleX(a);transform: scaleY(b); 元素x 方向缩放 元素x 方向缩放 元素y 方向缩放 a 倍，y 方向缩放b 倍 a 倍，y 方向不变 b 倍，x 方向不变 translate设置元素的位移，用法为:transform: translate(a, b);transform: translateX(a);transform: translateY(b);元素x 方向位移a ，y 方向位移b 元素x 方向位移a ，y 方向不变 元素y 方向位移b ，x 方向不变 skew设置元素倾斜的角度，用法包括:transform: skew(a, b); 斜角度b元素x 方向逆时针倾斜角度 a ，y 方向顺时针倾transform: skewY(b); 元素y 方向顺时针倾斜角度b ，想方向不变以上的参数均必须是以deg 结尾的角度数或0，可为负数表示反向。
matrix 设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。
origin 设置元素的悬挂点，用法包括：transform-origin: a b; 元素的悬挂点为(a, b) 元素的悬挂点即为它旋转和倾斜时的中心点。
取值中的a、b 可以是长度值、以%结尾的百分比或者left 、top 、right 、bottom 四个值。
transition transition-property 指定transition效果作用的CSS属性，其值是CSS属性名。
transition-duration动画效果持续的时间，其值为以s结尾的秒数。
transition-timing-function指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：transition-delay动画效果推迟开始执行的时间，其值为以s结尾的秒数。
CSS3动画的生命周期如下图所示，从中可以清楚的看出duration和delay之间的关系：animationCSS3中真正的动画属性是animation，而前面的transform 和transition都只是对DOM元素的变形或者是状态的过渡。
实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。
那么在设置animation 的属性之前就必须先设定好关键帧了。
关键帧@keyframes 的语法结构如下：@keyframesNAME {a% {/*CSS 属性*/}b% {/*CSS 属性*/}}NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。
另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes 中时无序的。
设置完关键帧后就可以继续设定animation 了。
animation-name 指定选用的动画的名字，即keyframes 中的NAME。
animation-duration同transition-duration 。
animation-timing-function同transition-timing-function 。
animation-delay同transition-delay 。
animation-iteration-count 设定动画执行的次数，其值可以是数字也可以是infinite （循环执行）。
animation-direction设定动画执行的方向，其值可以是normal （正常顺序播放）或alternate （反向播放）。
前缀因为CSS3还没有正式发布，所以各种浏览器对它的支持也不尽相同。
所以在设置CSS3属性（包括@开头的新属性）的时候通常需要对其添加浏览器标识的前缀，如-webkit- 表示Webkit 内核的浏览器Chrome 和Safari，-moz- 表示Fire Fox, -o-表示Opera。
无视IE吧，在IE上的实现通常还是要用到滤镜，而不是CSS3。
实例下面的代码模拟了上述大部分的CSS3动画属性，由于只使用了-vebkit-前缀，所以只能在Chrome 或Safari 下正常运行。
HTML代码：[html] view plain copy1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""”>2. <html xmlns="">3. <head>4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5. <title> CSS3动画</title>6. <link type="text/css" rel="stylesheet" href="animation.css" />7. </head>8.8. <body>9. <div class="rotate" >rotate </div>10. <div class="scale">scale</div>11. <div class="translate" >translate </div>12. <div class="skew">skew</div>13. <div class="origin" >origin </div>14. <div class="single">single property </div>15. <div class="whole" >whole property </div>16. <div class="resume">change & resume</div>17. <div class="animation" 'animation </div>18. </body>19. </html>CSS代码：animation.css [css] view plain copy1. div {2. width : 80px;3. height : 30px;4. line-height : 30px;5. text-align : center;6. background : #06F;7. color : #fff;8. font-family : Arial, Helvetica, sans-serif;9. -webkit-border-radius: 10px;10. margin : 5px;11. }12.13. .rotate {14. -webkit-transform: rotate(0deg);15. }16.17. .rotate:hover {18. -webkit-transform: rotate(90deg);19. }20.20. .scale {21. -webkit-transform: scale(1);22. }25. .scale:hover {26. -webkit-transform: scale(1.5);27. }28.29. .translate {30. -webkit-transform: translate(0px, 0px);31. }32.33. .translate:hover {34. -webkit-transform: translate(50px, 50px);35. }36.37. .skew {38. -webkit-transform: skew(0);39. }40.41. .skew:hover {42. -webkit-transform: skewY(20deg);43. }44.45. .origin {46. -webkit-transform-origin: top left;47. -webkit-transform: rotate(0);48. }49.50. .origin:hover {51. -webkit-transform: rotate(45deg);52. }53.54. .single {55. width : 150px;56. }57.58. .single:hover {59. background : #f00;60. width : 200px;61. height : 100px;62. line-height : 100px;63. -webkit-transition-property: background;64. -webkit-transition-duration: 2s;65. }66.67. .whole {68. width : 150px;69. }70.71. .whole:hover {72. width : 200px;height : 100px;line-height : 100px;background : #f00;-webkit-transition-duration: 2s;}.resume {width : 150px; -webkit-transition-duration: 2s;}.resume:hover {width : 200px;height : 100px;line-height : 100px;background : #f00;-webkit-transition-duration: 2s;}.animation:hover {-webkit-animation-name: anim;-webkit-animation-duration: 2s;-webkit-animation-timing-function: linear; -webkit-animation- direction : alternate;73. 74. 75. 76. 77. 78.79. 80. 81.82. 83.84.85. 86. 87. 88. 89. 90. 91. 92.93. 94. 95.96.119. } 97. -webkit-animation-iteration-count: infinite;@-webkit-keyframes anim { 0% {width : 80px; height : 30px; line-height : 30px; background : #06F; } 50% { width : 140px; height : 65px; line-height : 65px; background : #360; } 100% {width : 200px; height : 100px; line-height : 100px; background : #f00; }98. }99.100. 101. 102. 103.104.105.106.107. 108. 109.110.111.112.113.114.115.116.117.118.。