timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效,有多种特效展示。

通常我们常用的如下:

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

来个小例子看看:

代码:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cubic-bezier贝塞尔曲线函数</title>    
    <style type="text/css">
        .demo{margin:20px auto;border:1px solid #78ab43;width:800px;height:40px;position:relative}
        .demo div{width:40px;height:40px;background:#78ab43;position:absolute;top:0;left:40px;margin-left:-40px}
        .demo p{margin:0;padding:0;height:40px;line-height:40px;position:absolute;top:0;left:200px;color:#f05b34;font-weight:bold}
        .btn a{margin:10px auto;display:block;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid #78ab43;color:#555;text-decoration:none}
    </style>
</head>
<body>
    
    <div class="demo demo01">
       <p>all 1s cubic-bezier(0,0,1,1)</p><div></div>
    </div>
    <div class="demo demo02">
       <p>all 1s cubic-bezier(0.5,0,0.5,1)</p><div></div>
    </div>
    <div class="demo demo03">
       <p>all 1s cubic-bezier(0,0.5,1,0.5)</p><div></div>
    </div>
    <div class="demo demo04">
       <p>all 1s cubic-bezier(0,0,1,1.5)</p><div></div>
    </div>
    <div class="demo demo05">
       <p>all 1s cubic-bezier(0,-1,1,1)</p><div></div>
    </div>
    
    <div class="btn btn01">
       <a href="javascript:void(0)">开始运动</a>
    </div>
    <div class="btn btn02">
       <a href="">刷新重置</a>
    </div>
    
    <script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $('.btn01 a').on('click',function(){
          for(i=1;i<=$('.demo').length;i++){
            $('.demo0'+i+' div').css({"transition":$('.demo0'+i+' p').text(),"left":"100%"});
          }  
        });
    </script>
</body>
</html>

demo地址:http://test.ixiewei.com/cubic-bezier/

参考地址:http://cubic-bezier.com/(可以自由设定各种运动轨迹)

标签: none

添加新评论

选择表情