1.css的transition。

语法：

transition: property duration timing-function delay;
property:填写需要变化的css属性如：width,line-height,font-size,color等;

duration:完成过渡效果需要的时间（2s 或者2000ms）

timing-function:完成效果的速度曲线（linear,ease,ease-in,ease-out等等）

timing-delay:动画效果的延迟触发时间（2s 或者2000ms）。默认值分别为：all 0 ease 0

transition抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。

这种动画方式是css3的，因此ie9以下是不支持的，其他的浏览器需要加前缀，并且只有两态，不支持自定义中间的状态。

例子：

tips：transform是一种变化属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。

　　　前缀：

　　　　　　transform:rotate(9deg);
　　　　　　-ms-transform:rotate(9deg); /* Internet Explorer */
　　　　　　-moz-transform:rotate(9deg); /* Firefox */
　　　　　　-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
　　　　　　-o-transform:rotate(9deg); /* Opera */　　

2.css3的animation属性

语法：

animation: name duration timing-function delay iteration-count direction;
name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。
duration:完成动画所需要的时间（2s 或者 2000ms）
timing-function:完成动画的速度曲线
delay：动画开始之前的延迟iteration-count：动画播放次数
direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。使用animation属性制作动画可以更加灵活的设置动画帧，通过不同keyframe（动画帧）的设置，实现很多优雅的效果，keyframe中的百分数是动画完成总时间的比例。
animation是设置总的动画效果，而keyframe中设置上相应的动画名字，然后在keyframe中设置具体的动画效果。当然由于是css3的属性，仍然需要注意它的兼容性，加上必须的前缀。例子：