CSS3 transition-timing-function 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT书包</title>
<script type="text/javascript" src="http://www.itshubao.com/static/js/jquery.min.js"></script>
</head>
<body>

<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>

</body>
</html>

CSS

.demo_box {
    border: 1px solid #3DA5DC;
    background: #a4dcf9;
    height: 100px;
    width: 200px;
    text-align: center;
    color: #fff;
}
.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;
}

JavaScript

$(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;
        }
    })
});