<rp id="wnpn7"><ruby id="wnpn7"></ruby></rp>
<progress id="wnpn7"><track id="wnpn7"><rt id="wnpn7"></rt></track></progress>
<ruby id="wnpn7"></ruby>
<ruby id="wnpn7"><blockquote id="wnpn7"><div id="wnpn7"></div></blockquote></ruby>

    1. <em id="wnpn7"><ruby id="wnpn7"><input id="wnpn7"></input></ruby></em>
      1. <button id="wnpn7"><acronym id="wnpn7"></acronym></button><button id="wnpn7"><acronym id="wnpn7"></acronym></button>

        <rp id="wnpn7"><acronym id="wnpn7"></acronym></rp>

        <li id="wnpn7"><object id="wnpn7"><u id="wnpn7"></u></object></li>
        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > HTML >
        • html5教程之css教程之animation-name [動畫名稱]

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


        語法

        animation-name: none | <identifier> [ , none | <identifier> ]*;定義一個或多個動畫名稱。
        語法項目 說明
        初始值 none
        適用于 所有元素
        可否繼承
        媒介 視覺
        版本 CSS3.0

        說明

        檢索或設置對象所應用的動畫名稱,必須與規則@keyframes配合使用,因為動畫名稱由@keyframes定義 如果提供多個屬性值,以逗號進行分隔。

        如何開始進行動畫

        @keyframes相當于一個命名空間,后面跟一個名詞,如果在class中的animation-name定義了與之對應的name,那么就可以執行動畫了。定義動畫時,簡單的動畫可以直接使用關鍵字from和to,即從一種狀態過渡到另一種狀態:如:

        
        			
        1. @-webkit-keyframes demo{
        2.     from{left:0;}
        3.     to{left:400px;}
        4. }
        復制

        復雜動畫:

        
        			
        1. @-webkit-keyframes demo{
        2.     0%{left:0;}
        3.     50%{left:200px;}
        4.     100%{left:400px;}
        5. }
        復制

        這里面的百分百有點像flash里幀的概念。表示設置某個時間段內任意時間點的樣式。

        取值

        none:不引用任何動畫名稱

        identifier:定義一個或多個動畫名稱(identifier標識)

        實例代碼

        CSS
        
        				
        1. .animation_name{
        2.     left:0;
        3.     top:100px;
        4.     position:absolute;
        5.     -webkit-animation:0.5s 0.5s ease infinite alternate;
        6.     -webkit-animation-name:demo;
        7.     -moz-animation:0.5s 0.5s ease infinite alternate;
        8.     -moz-animation-name:demo;
        9. }
        10. @-webkit-keyframes demo{
        11.     0%{left:0;}
        12.     100%{left:400px;}
        13. }
        復制
        HTML
        
        				
        1. <div class="demo_box animation_name">看我沒事來回跑</div>
        復制
        運行一下 »     純CSS焦點圖效果 »

        兼容性

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

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