CSS3中添加了几个动画效果的属性。 通过设置这些属性，可以在不使用JavaScript的情况下创建简单的动画效果。 CSS3动画的属性主要分为三个类别：“变换”、“变换”和“动画”。
transform rotate
设置元素顺时针旋转的角度。 使用方法如下。
转译： rotate (x；
参数x必须是以deg结尾的角度数或0，负数表示反转。
scale
设定放大或缩小元素的倍率。 使用方法如下。
变换： scale (a )； 元素x、y方向都按a倍缩放
transform:scale(a，b )； 要素x方向缩放为a倍，y方向缩放为b倍
传输： scalex (a )； 元素x方向缩放为a倍，y方向不变
transform:Scaley(b )； 元素的y方向缩放为b倍，x方向不变
translate
按如下方式设置元素的偏移：
变换：变换(a，b )； 元素x方向位移a、y方向位移b
变换：变换x (a )； 元素x方向位移a、y方向没有变化
变换：变换y (b )； 元素y方向位移b、x方向无变化
skew
设置元素的倾斜角度。 使用方法如下。
transform:skew(a，b )； 元素x方向为逆时针倾斜角度a，y方向为顺时针倾斜角度b
transform:skewx(a )； 元素x方向逆时针倾斜角度a，y方向不变
transform :密钥(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之间的关系。
animation CSS3的真正动画属性是animation，但前面的变换和变换只是DOM元素的变形或状态的转移。 实际上，CSS3支持的动画效果只是填充动画。 也就是说，在动画的整个生命周期中设置了一些关键状态(key frame、关键帧)，然后动画会自动计算并模拟关键帧之间的过渡。 在设置动画属性之前，必须设置关键帧。
关键帧@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动画属性，由于只使用了–webkit- 前缀，所以只能在Chrome或Safari下正常运行。
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3动画</title> <link type="text/css" rel="stylesheet" rel="external nofollow" href="animation.css" /> </head> <body> <div class="rotate">rotate</div> <div class="scale">scale</div> <div class="translate">translate</div> <div class="skew">skew</div> <div class="origin">origin</div> <div class="single">single property</div> <div class="whole">whole property</div> <div class="resume">change & resume</div> <div class="animation">animation</div> </body> </html>
CSS代码：
animation.css
div { width: 80px; height: 30px; line-height: 30px; text-align: center; background: #06F; color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-border-radius: 10px; margin: 5px; } .rotate { -webkit-transform: rotate(0deg); } .rotate:hover { -webkit-transform: rotate(90deg); } .scale { -webkit-transform: scale(1); } .scale:hover { -webkit-transform: scale(1.5); } .translate { -webkit-transform: translate(0px, 0px); } .translate:hover { -webkit-transform: translate(50px, 50px); } .skew { -webkit-transform: skew(0); } .skew:hover { -webkit-transform: skewY(20deg); } .origin { -webkit-transform-origin: top left; -webkit-transform: rotate(0); } .origin:hover { -webkit-transform: rotate(45deg); } .single { width: 150px; } .single:hover { background: #f00; width: 200px; height: 100px; line-height: 100px; -webkit-transition-property: background; -webkit-transition-duration: 2s; } .whole { width: 150px; } .whole:hover { 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; -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; } }
http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html
http://www.w3cplus.com/content/css3-transition
http://www.w3cplus.com/content/css3-animation