css3 的动画让 html 页面变得生机勃勃，但是如何用好动画是一门艺术，接下来我来以一个demo为例，来练习css3 animation。
我们先详细了解一下animation 这个属性。
animation-name
这是一个必填的选项，否则无法指定要执行哪一个动画。
animation-duration
属性定义动画完成一个周期所需要的时间，以秒或毫秒计，如果不写的话，动画将无法执行。
animation-timing-function
动画速度曲线（默认ease），这个属性稍微复杂一些，它规定了这个动画在哪个时间执行的快，那个时间执行的慢。属性定义了一些常用的速度曲线，下面是一些例子：
linear // 动画从头到尾的速度是相同的 ease // 动画以低速开始，然后加快，在结束前变慢 ease-in // 动画以低速开始 ease-out // 动画以低速结束 ease-in-out // 动画以低速开始和结束 cubic-bezier(n,n,n,n) // cubic-bezier 是二阶贝塞尔曲线，4个值都在[0,1]之间取，前两个值组成一个点，后两个值组成一个点。animation-delay
规定在动画开始之前的延迟时间（默认0），同样以秒或毫秒计。
animation-iteration-count
动画播放次数（默认1），可以是任意正整数或者无限次数 infinite。
animation-direction
动画是否方向播放（默认normal）
normal // 每个动画周期正向播放 reverse // 每个动画周期反向播放 alternate // 奇数周期正向播放，偶数周期方向播放 alternate-reverse // 偶数周期方向播放，奇数周期正向播放animation
animation 是animation动画的简写，可以将以上6个属性写在一起。既：
animation: name duration timing-function delay iteration-count direction;我们将animation基础知识复习了一遍，接下来我们用一个小例子感受一下animation 的魅力。我们先看一下这个
这里运用动画的有三处，第一个是手机的旋转，第二个和第三个是对号错号的缩放。下面上代码
html部分
<div class="phone"> <img src="img/phone.png"/> <i class="yes"></i> <i class="no"></i></div>
css部分
