1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > HTML >
        • html5教程之css教程之transition-timing-function [過渡效果]

        本站最新發布   Python從入門到精通|Python基礎教程
        試聽地址  
        http://www.squ68.com/eschool/python.html


        transition-timing-function用來定義過渡動畫的效果。

        語法

        transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]* ;設置動畫執行的方式(緩動效果)。
        語法項目 說明
        初始值 ease
        適用于 所有元素
        可否繼承
        媒介 視覺
        版本 CSS3.0

        說明

        transition-timing-function可以設置動畫的過渡效果,默認值ease。

        取值

        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)函數。

        cubic-bezier:特殊的立方貝塞爾曲線效果。

        實例代碼

        CSS
        
        				
        1. .demo_box{
        2.     -webkit-transition:all 2s 0.5s;
        3.     -moz-transition:all 2s 0.5s;
        4.     position:relative;
        5.     left:10px;
        6.     width:50px;
        7.     height:50px;
        8.     border-radius:50px;
        9.     margin:10px 0;
        10.     overflow:hidden;
        11. }
        12. .ease{
        13.     -webkit-transition-timing-function:ease;
        14.     -moz-transition-timing-function:ease;
        15. }
        16. .linear{
        17.     -webkit-transition-timing-function:linear;
        18.     -moz-transition-timing-function:linear;
        19. }
        20. .ease-in{
        21.     -webkit-transition-timing-function:ease-in;
        22.     -moz-transition-timing-function:ease-in;
        23. }
        24. .ease-out{
        25.     -webkit-transition-timing-function:ease-out;
        26.     -moz-transition-timing-function:ease-out;
        27. }
        28. .ease-in-out{
        29.     -webkit-transition-timing-function:ease-in-out;
        30.     -moz-transition-timing-function:ease-in-out;
        31. }
        32. .cubic-bezier{
        33.     -webkit-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
        34.     -moz-transition-timing-function:cubic-bezier(0.52,0,0.58,1.0);
        35. }
        36. .run{
        37.     left:500px;
        38. }
        復制
        HTML
        
        				
        1. <div class="demo_box ease">ease</div>
        2. <div class="demo_box linear">linear</div>
        3. <div class="demo_box ease-in">ease-in</div>
        4. <div class="demo_box ease-out">ease-out</div>
        5. <div class="demo_box ease-in-out">ease-in-out</div>
        6. <div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)</div>
        7. <input type="button" id="run" value="運行" style="margin:10px 10px;" />
        8. <script>
        9. $(function(){
        10.     $("#run").toggle(function(){
        11.     $(".demo_box").addClass("run");
        12. $(this).val("返回");
        13. },function(){
        14.     $(".demo_box").removeClass("run");
        15. $(this).val("運行");
        16. });
        17. });
        18. </script>
        復制
        運行一下 »

        兼容性

        IE Firefox Opera Safari Chrome
        IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看