css3 -webkit-animation与-webkit-keyframes

-webkit-transform定义了元素的变形，-webkit-transition定义了元素的属性变化样式，-webkit-animation与-webkit-keyframes则真正的让元素动起来（不只是变到什么状态，更定义了中间过程）

让元素动起来

-webkit-animation定义一段动画属性，比如名字，持续时间，当前状态等。-webkit-keyframes则对每一个动画定义时间轴，可以设置某个时间动画作用的元素是什么状态。

--

@-webkit-keyframes rotateA {0%{ -webkit-transform: rotateY(0deg);}100%{ -webkit-transform: rotateY(360deg);}} #circle{ -webkit-animation-name: rotateA; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}

--

上面的代码中，定义了元素#circle的动画属性：名字是rotateA等。@-webkit-keyframes rotateA 针对name是rotateA的动画设置时间轴：0%位置时什么样，100%位置时什么样。

css3 animation的所有属性及详细解释在http://www.w3.org/TR/css3-animations/