过度:transition

使用方法:

transition: all 0.4s cubic-bezier(0.4,0.1,0.5,1) 0.1s;
<transition-property> <transition-duration> <transition-timing-function> <transition-delay>

描述:CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

特点:只有开始状态和结束状态2个关键帧,需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性.

transition-property(); 

/*动画变化的属性，取值可［单个属性］，［多个属性，以逗号分开］，[all指定所有属性]*/
transition-property: width,height,background-color,border,line-height;

transition- duration:; 

/*过渡效果需要花费的时间*/
transition-duration: 0.4s;

transition-delay:; 

/*定义过渡效果何时开始*,延迟的时间/
transition-delay:0.1s;

transition-timing-function: 

/*属性规定过渡效果的速度曲线:允许过渡效果随着时间来改变其速度,开始和结束的速度曲线相反*/
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

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 之间的数值。

描述:本质是定义加速度


linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier(0.9,0.1,0.9,1)

none

.mix1,.mix2,.mix3,.mix4,.mix5,.mix6{
    width: 150px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    color: #fff;
    transition-property:width;
    transition-duration: 1s;
    background: #ff7d27;
    border-radius: 5px;
    padding-left: 10px;
}
.mix1{
    transition-timing-function:linear;
}
.mix2{
    transition-timing-function:ease;
}
.mix3{
    transition-timing-function:ease-in;
}
.mix4{
    transition-timing-function:ease-out;
}
.mix5{
    transition-timing-function:ease-in-out;
}
.mix6{
    width: 200px;
    transition-timing-function:cubic-bezier(0.9,0.1,0.9,1);
}
.mix7{
    width: 150px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    color: #fff;
    background: #ff7d27;
    border-radius: 5px;
    padding-left: 10px;
}
.mix1:hover,.mix2:hover,.mix3:hover,.mix4:hover,.mix5:hover,.mix6:hover,.mix7:hover{
    width: 600px;
}


/*放大、旋转*/
transform : rotate(360deg) scale(1.2);

js监控

使用方法: 

//    Chrome:webkitTransitionEnd
//    Opera:10.5->oTransitionEnd,12->otransitionend,12.10->transitionend
//    Safari:webkitTransitionEnd
//    Android: webkitTransitionEnd
//    Opera Mobile:10->oTransitionEnd,12->otransitionend,12.10->transitionend
//    Safari Mobile:webkitTransitionEnd

    $("#mix").one("webkitTransitionEnd",function(){
        console.log('webkitTransitionEnd');
    });