制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。
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等等）
| 值 | 描述 |
|---|---|
| linear | 匀速（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 慢慢变快（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)）。渐显渐隐效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
timing-delay:动画效果的延迟触发时间（2s 或者2000ms）。
默认值分别为：all 0 ease 0
transition抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。
这种动画方式是css3的，因此ie9以下是不支持的，其他的浏览器需要加前缀，并且只有两态，不支持自定义中间的状态。
例子：
| <style type="text/css"> div{width:100px;height:100px;background:red;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}</style><div></div> |
tips：transform是一种变化属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。
前缀：
新闻热点
疑难解答
