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>