css3 transition(过渡)

transition，中文译为过渡，在CSS中表示属性渐进变化的效果。例如改变某个元素的宽度，从初始的100元素到300元素。

废话少说先来一段

.content{
height: 100px;
width: 100px;
background-color:black;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
transition: height 0.6s;
-o-transition:height 0.6s;
}
.content:hover{
height: 300px;
}

<div class="content"></div>

这个例子从高度100在经过鼠标hover事件0.6s后完成平滑过渡。即鼠标移动到div块上触发hover，就可以展现一个平滑过渡的动画

.transition_ease{height: 100px;width: 100px;
  transition:background-color 3s ease;
        -webkit-transition:left 3s linear,background-color 3s ease;
 -moz-transition:left 3s linear,background-color 3s ease;
 -o-transition:left 3s linear,background-color 3s ease;
}
.transition_ease:hover{background: rgba(139,0,22,0.2)}

<div class="transition_ease"></div>