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>