CSS3：过渡效果and帧动画

css3中有三种和动画相关的属性：transform、transition、animation。
transform描述元素静态样式，transition和animation都能实现动态效果。一般前者配合后者使用。

不同点：
1.  触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。
结论：
1. 如果要灵活定制多个帧以及循环，用animation.
2. 如果要简单的from to 效果，用 transition.
3. 如果要使用js灵活设定动画属性，用transition.

• transition过渡属性

语法：transition: property duration timing-function delay;
属性：
      1.transition-proprety:设置过渡效果的css属性的名称(none || all || proprety如width)
      2.transition-duration:过渡效果完成的时间
      3.transition-timing-function:速度效果的速度曲线(linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n))
      4.transition-delay:过渡效果何时开始
使用方法：
a{
      width:100px;
      transition:all 3s;
}
a:hover{
      width:300px;
}

• animation帧动画

语法：animation: name duration timing-function delay iteration-count direction;
属性：
      1.animation-name:需要绑定到选择器的keyframe名称
      2.animation-duration:完成动画的时间
      3.animation-timing-function:动画的速度曲线
      4.animation-delay:动画开始之前的延迟
      5.animation-iteration-count:动画播放次数( n || infinite )
      6.animation-direction:是否轮流反向播放( normal || alternate )
使用方法：
div{
        animation:aaa 3s ease 1s 3 alternate;
       -webkit-animation:aaa 3s ease 1s 3 alternate;
}
@keyframes  aaa{
      from {left:0px;}
      to {left:200px;}
}
@-webkit-keyframes  aaa {
      from {left:0px;}
      to {left:200px;}
}