css3 中的 animation属性主要用来做动画的,详细的文章看:http://www.w3cplus.com/content/css3-animation
调用animation的方法:animation-name(动画名称) animation-duration(播放动画的总时长) animation-timing-function(动画的播放方式:
ease ease-in ease-in-out
linear cubic-bezier
) animation-delay(动画开始执行时间) animation-iteration-count(循环次数) ...
在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，
玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们
在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间
和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我
要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第
二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那
么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:
Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对
花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中
的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给
每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改
变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始
，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性
取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效
的，不起任何作用。因为keyframes的单位只接受百分比值。
下面贴上一个简单的动画效果样式(当鼠标移动到图片上面时图片会扭曲放大缩小效果):
/**
本代码不是原创,只是进行了些修改,谢谢原作者的贡献
*/
img:hover{ -webkit-animation: tada 1s .2s ease both; -moz-animation: tada 1s .2s ease both; } @-webkit-keyframes tada{ 0%{-webkit-transform:scale(1);} 10%, 20%{-webkit-transform:scale(0.5) rotate(10deg);} 30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(-10deg);} 40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(10deg);} 100%{-webkit-transform:scale(1) rotate(0);} } @-moz-keyframes tada{0%{-moz-transform:scale(1);} 10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);} 40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);}}