前几天在Qzone上看到css3动画，非常神奇，所以也学习了一下。首先看看效果http://www.css88.com/demo/css3_Animation/
很悲剧的是css3动画现在只有WebKit内核的浏览器（Safari和Chrome）支持，虽然应用还不是时候，但是效果却不可低估。
在哪里定义动画效果？
css3动画一般通过鼠标事件或者说状态定义动画，通常我们可以用CSS中伪类和js中的鼠标事件来定义。
| 动态伪类 |
起作用的元素 |
描述 |
| :link |
只有链接 |
未访问的链接 |
| :visited |
只有链接 |
访问过的链接 |
| :hover |
所有元素 |
鼠标经过元素 |
| :active |
所有元素 |
鼠标点击元素 |
| :focus |
所有可被选中的元素 |
元素被选中 |
js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等
transition的基本语法：
css3动画通过transition属性和其他css属性（颜色，宽高，变形，位置等等）配合来实现。
transition的语法：
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
当然这是简写，我们也可以完整的写：
transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*；
transition-duration ： <time> [, <time>]*
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
transition-delay ： <time> [, <time>]*
