transition-timing-function [过渡效果]

<div class="demo_box ease">ease</div>
<div class="demo_box linear">linear</div>
<div class="demo_box ease-in">ease-in</div>
<div class="demo_box ease-out">ease-out</div>
<div class="demo_box ease-in-out">ease-in-out</div>
<div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)</div>
<button type="button" id="run" class="btn btn-sm btn-teal">运行</button>
  

.demo_box{
    -webkit-transition:all 2s 0.5s;
    -moz-transition:all 2s 0.5s;
    position:relative;
    left:10px;
    width:50px;
    height:50px;
    border-radius:50px;
    margin:10px 0;
    overflow:hidden;
}
.ease{
    -webkit-transition-timing-function:ease;
    -moz-transition-timing-function:ease;
}
.linear{
    -webkit-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
}
.ease-in{
    -webkit-transition-timing-function:ease-in;
    -moz-transition-timing-function:ease-in;
}
.ease-out{
    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
}
.ease-in-out{
    -webkit-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
}
.cubic-bezier{
    -webkit-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
    -moz-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
}
.run{
    left:500px;
}
  

$(function(){
    var i=0;
    $("#run").click(function(){
        if(i==0){
            $(".demo_box").addClass("run");
            $(this).text("返回");
            i=1;
        } else {
            $(".demo_box").removeClass("run");
            $(this).text("运行");
            i=0;
        }
    })
});