transition属性

1.transition 属性
是一个简写属性，用于设置四个过渡属性：
property：规定设置过渡效果的 CSS 属性的名称
duration：完成过渡效果需要多少秒
timing-function ：过渡效果速度的速度曲线
delay：定义什么时候开始过渡效果
2.兼容
-moz-transition; /* Firefox 4 /
-webkit-transition; / Safari and Chrome /
-o-transition; / Opera */
3.transition-timing-function 的五种取值
ease 逐渐变慢
linear 匀速
ease-in 缓慢开始（加速）
ease-out 缓慢结束（减速）
ease-in-out 缓慢开始，缓慢结束（先加速后减速）
cubic-bezier 贝塞尔曲线（matthewlein.com/ceaser）
4.示例

```css

.top-area {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width: 100%;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
}