關於CSS實現動畫詳解及實例

css3 動畫

　　在CSS3中可以透過animation創造複雜的動畫序列，像transition屬性一樣用來控制CSS的屬性實現動畫效果。

透過類似Flash動畫中的關鍵影格來宣告一個動畫。效果。 #keyframes的語法規則：命名是由

@
1. keyframes開頭，後面緊跟著動畫的名稱(animation-name)，再加上一對花括號"{...}"，括號中是多個不同時間段的樣式規則。 「to」代表一個動畫的開始與結束，「from」相當於0%，"to"相當於100%。從0%開始到100%時結束，從中還經歷了一個40%和60%兩個過程，上面代碼具體意思是：「yxz」動畫在0%時元素定位到left為100px的位置背景色為green ，然後40%時元素過渡到left為150px的位置並且背景色為orange，60%時元素過渡到left為75px的位置,背景色為blue，最後100%結束動畫的位置元素又回到起點left為100px處,背景色變成red。

   ##　　在

   @
keyframes中的關鍵幀並不是一定要按照順序來指定，其實可以任何順序來指定關鍵幀，因為動畫中的關鍵幀順序由百分比值確定而不是聲明的順序。
2. 　　這兩個動畫，因為他們並沒有附加到任何元素上，是沒有效果的。透過宣告

   @

   keyframes動畫後，要讓動畫生效，需要透過CSS屬性來呼叫
@

keyframes宣告的動畫。

呼叫關鍵影格

　　使用動畫屬性animation呼叫@
keyframes宣告的動畫。 動畫屬性animation，是一個複合屬性，它包含了八個子屬性。其語法如下：<pre class="brush:php;toolbar:false">@keyframes yxz {  0% {     margin-left: 100px;     background: green;  }  40% {     margin-left: 150px;     background: orange;  }  60% {     margin-left: 75px;     background: blue;  }  100% {     margin-left: 100px;     background: red;  } }</pre>　　animation-name

：主要用來指定一個關鍵影格動畫的名字，這個名字要與

@keyframes宣告的名稱一樣。 css載入動畫時會套用對應的名字來執行。

@keyframes yxz{
    0%,40%{
        width:200px;
        height:200px;
    }
    20%,60%,80%{
        width:100px;
        height:100px;
    }
    100%{
        width:0;
        height:0;
    }
}

　　IDENT：是由

@keyframes創建的動畫名稱。

　　none：預設值，當值為none時，沒有任何動畫效果，可以用來覆寫動畫。

　　animation-duration

：主要用來設定動畫播放所需的時間，單位以s(秒)或ms(毫秒),預設值為0。

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *</animation-fill-mode></animation-play-state></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name>

　　animation-timing-function：主要用來設定動畫的播放快慢方式。 　　與transition-timing-function類似，可點選查看。

　　

animation-delay

：主要用來設定動畫延遲時間。 <pre class="brush:php;toolbar:false">animation-name:none | IDENT [,none | IDENT] *</pre>　　當time為正

整數

時為延遲時間，負整數時會截斷播放時間(把animation-duration所用的時間截斷一部分，就是說跳過這部分值，直接進行後面的動畫)　　

　　

animation-iteration-count：主要用來設定動畫播放的次數。

animation-duration:<time> [,<time>] *</time></time>

　　通常為整數，也可以使用浮點數。預設值為1。如果取值為infinite，動畫會無限播放。 　　

animation-direction：主要用來設定動畫播放的方向。

animation-duration:<time> [,<time>] *</time></time>

　　預設值為normal，動畫每次循環

都是向前播放。 alternate，動畫向前播放一次，向後播放一次。 　　

animation-play-state

：主要用來控制動畫播放的狀態。

animation-iteration-count: infinite | <number> [,infinite | <number>] *</number></number>

　　running是預設值，是播放的意思，可以透過paused停止播放。

　　animation-fill-mode：主要用来设置动画时间之外的属性，也就是动画开始前或者结束后的属性。

animation-fill-mode:none | forwards | backwards | both

　　默认值为none，表示动画按期执行与结束，在动画结束时，会反回初始状态。forwards，当动画结束时，停留在最后最后一帧(保持最后的状态)。backwards，当动画开始时迅速应用第一帧。both，同时拥有forwards与backwards的作用。

学以致用，学习完动画的基础知识后，就需要练习一下，把学的东西用出来。可以把代码复制在浏览器中观看效果。

nbsp;html>



<meta>
<title></title>
<style>
    /*元素从左边出现*/
    @keyframes bga {
        0% {
            left: -500px;
        }

        100% {
            left: 0;
        }
    }
    /*元素从下边出来*/
    @keyframes bgb {
        0% {
            top: 350px;
        }

        100% {
            top: 0;
        }
    }
    /*元素从小到大*/
    @keyframes bgc {
        0% {
            transform: scale(0.1);
        }

        100% {
            transform: none;
        }
    }
    /*元素从大到小*/
    @keyframes bgd {
        0% {
            transform: scale(2);
        }

        100% {
            transform: none;
        }
    }
    /*元素旋转并放大*/
    @keyframes bge {
        0% {
            transform: rotate(-360deg) scale(0.1);
        }

        100% {
            transform: none;
        }
    }
    /*选中元素时，隐藏其他元素*/
    @keyframes no {
        0% {
            z-index: 23;
        }

        100% {
            z-index: 23;
        }
    }
    /*兼容webkit浏览器*/
    @-webkit-keyframes bga {
        0% {
            left: -500px;
        }

        100% {
            left: 0;
        }
    }

    @-webkit-keyframes bgb {
        0% {
            top: 350px;
        }

        100% {
            top: 0;
        }
    }

    @-webkit-keyframes bgc {
        0% {
            transform: scale(0.1);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes bgd {
        0% {
            transform: scale(2);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes bge {
        0% {
            transform: rotate(-360deg) scale(0.1);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes no {
        0% {
            z-index: 23;
        }

        100% {
            z-index: 23;
        }
    }

    * {
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
    }

    img.bg {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
    }

    .demo p {
        position: absolute;
        z-index: 9999;
    }

    a {
        display: block;
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 0,.2);
        margin-bottom: 15px;
        text-decoration: none;
        color: #ffffff;
    }

    #bga:target {
        z-index: 100;
        -webkit-animation:bga 2s ease;
        animation:bga 2s ease;
    }

    #bgb:target {
        z-index: 100;
        -webkit-animation:bgb 2s ease;
        animation:bgb 2s ease;
    }

    #bgc:target {
        z-index: 100;
        -webkit-animation:bgc 2s ease;
        animation:bgc 2s ease;
    }

    #bgd:target {
        z-index: 100;
        -webkit-animation:bgd 2s ease;
        animation:bgd 2s ease;
    }

    #bge:target {
        z-index: 100;
        -webkit-animation:bge 2s ease;
        animation:bge 2s ease;
    }
</style>


<p>
    </p><p>
        </p>

            
• 第一张
            
• 第二张
            
• 第三张
            
• 第四张
            
• 第五张
        

                             

CSS3动画完。

以上是關於CSS實現動畫詳解及實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！