CSS3-Animation

Animation 是 CSS3 中表现动画的其中一种方式；缺点：有点粗糙，优点：可以省去复杂的 js、frash 代码。

Animation 中 keyframe非常重要，他就像是frash中关键帧；有了这些东西就能完成一个动画效果。

keyframe 例子如下：

@-webkit-keyframes 'demo'{  0%{    width: 50px  },  30%{    width: 100px  },  70%{    width: 130px  },  100%{    width: 50px  }}

上述动画是，宽度从50px；增加到 100px；再增加到 130px ；最后缩小回50px。

如果想调用上述动画，需要定义一个 DIV，一个关联CSS

CSS定义如下所示：

.animation-demo{   width: 50px;    height: 50px;    background: blue;    animation: demo 5s infinite alternate;}

DIV定义如下所示：

<div class="animation-demo"></div>