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教程之animation-timing-function [播放方式]

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


        語法

        animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) [, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*; 指定對象動畫的持續時間 。
        語法項目 說明
        初始值 ease
        適用于 所有元素
        可否繼承
        媒介 視覺
        版本 CSS3.0

        說明

        檢索或設置對象動畫的過渡類型

        如果提供多個屬性值,以逗號進行分隔。

        取值

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

        step-start:馬上轉跳到動畫結束狀態。

        step-end:保持動畫開始狀態,直到動畫執行時間結束,馬上轉跳到動畫結束狀態。

        steps(<number>[, [ start | end ] ]?):第一個參數number為指定的間隔數,即把動畫分為n步階段性展示,第二個參數默認為end,設置最后一步的狀態,start為結束時的狀態,end為開始時的狀態,若設置與animation-fill-mode的效果沖突,而以animation-fill-mode的設置為動畫結束的狀態。

        cubic-bezier(<number>, <number>, <number>, <number>):特殊的立方貝塞爾曲線效果。

        實例代碼

        CSS
        
        				
        1. .demo_box{
        2.     -webkit-animation:f1 2s 0.5s forwards;
        3.     -moz-animation:f1 2s 0.5s forwards;
        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-animation-timing-function:ease;
        14.     -moz-animation-timing-function:ease;
        15. }
        16. .linear{
        17.     -webkit-animation-timing-function:linear;
        18.     -moz-animation-timing-function:linear;
        19. }
        20. .ease-in{
        21.     -webkit-animation-timing-function:ease-in;
        22.     -moz-animation-timing-function:ease-in;
        23. }
        24. .ease-out{
        25.     -webkit-animation-timing-function:ease-out;
        26.     -moz-animation-timing-function:ease-out;
        27. }
        28. .ease-in-out{
        29.     -webkit-animation-timing-function:ease-in-out;
        30.     -moz-animation-timing-function:ease-in-out;
        31. }
        32. .step-start{
        33.     -webkit-animation-timing-function:step-start;
        34.     -moz-animation-timing-function:step-start
        35. }
        36. .step-end{
        37.     -webkit-animation-timing-function:step-end;
        38.     -moz-animation-timing-function:step-end;
        39. }
        40. .steps{
        41.     -webkit-animation-timing-function:steps(2);
        42.     -moz-animation-timing-function:steps(2)
        43. }
        44. .cubic-bezier{
        45.     -webkit-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
        46.     -moz-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
        47. }
        48. @-webkit-keyframes f1{
        49.     0%{left:10px;}
        50.     100%{left:500px;}
        51. }
        52. @-moz-keyframes f1{
        53.     0%{left:10px;}
        54.     100%{left:500px;background:#f00}
        55. }
        復制
        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 step-start">step-start</div>
        7. <div class="demo_box step-end">step-end</div>
        8. <div class="demo_box steps">steps(2)</div>
        9. <div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)</div>
        復制
        運行一下 »

        兼容性

        IE Firefox Opera Safari Chrome
        IE 10+ Firefox 3.5+ 目前暫無版本支持 Safari 10+ Chrome 2.0+

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