HTML Style animation用法及代碼示例

樣式動畫屬性使動畫從一種CSS樣式過渡到另一種CSS樣式成為可能。它配置時序，延遲，持續時間以及動畫序列應如何進行的其他詳細信息。該動畫包含兩個組件，一個是描述組件的CSS，另一個是一組指示樣式的開始和結束狀態的關鍵幀。

用法:

用於返回動畫屬性
```
object.style.animation
```

用於設置動畫屬性

object.style.animation="name duration timingFunction delay
iterationCount direction fillMode playState"

屬性值

animationName:描述附加到選擇器的關鍵幀的名稱。
animationDuration:描述動畫發生多長時間的時間。
animationTimingFunction:描述動畫的速度。
animationDelay:描述動畫開始之前的延遲。
animationIterationCount:描述動畫發生的次數。
animationDirection:描述動畫是否應在交替的循環中反向播放。
animationFillMode:描述動畫結束時要應用的值。
animationPlayState:描述動畫是正在運行還是已暫停。

範例1：

<!DOCTYPE html> 
<html> 
    <head> 
        <style>  
            #GFG { 
                width:90px; 
                height:90px; 
                background:green; 
                color:white; 
                position:relative; 
                text-align:center; 
                  
                /* -webkit- is used for safari browser */ 
                -webkit-animation:GFG_Move_1 1s infinite; 
                  
                animation:GFG_Move_1 1s infinite; 
            } 
              
            /* For Opera, Chrome and Safari browser */ 
            @-webkit-keyframes GFG_Move_1 { 
                from {left:250px;} 
                to {left:500px;} 
            } 
              
            /* For Opera, Chrome and Safari browser */ 
            @-webkit-keyframes GFG_Move_2 { 
                from {left:350px;top:0px;} 
                to {left:350px;top:200px;} 
            } 
              
            @keyframes GFG_Move_1 { 
                from {left:250px;} 
                to {left:500px;} 
            } 
              
            @keyframes GFG_Move_2 { 
                from {left:350px;top:0px;} 
                to {left:350px;top:200px;} 
            } 
        </style> 
    </head> 
      
    <body align="center"> 
        <button onclick = "myGeeks()"> 
            Change Animation 
        </button> 
          
        <p> 
            Click on button to change the animation. 
        </p> 
          
        <script> 
            function myGeeks() { 
                  
                /* This code run on safari browser */ 
                document.getElementById("GFG").style.WebkitAnimation 
                        = "GFG_Move_2 4s 2"; 
                          
                document.getElementById("GFG").style.animation 
                        = "GFG_Move_2 4s 2"; 
            } 
        </script> 
          
        <div id="GFG">GFG</div> 
    </body> 
</html>

輸出：

之前單擊按鈕：div水平移動
單擊按鈕後：div垂直移動

範例2：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            HTML DOM Style animation Property 
        </title> 
          
        <style>  
            #GFG { 
                width:90px; 
                height:90px; 
                background:green; 
                position:relative; 
                color:white; 
                text-align:center; 
                  
                /* /* For Opera, Chrome, Safari*/ */ 
                -webkit-animation:GFG_Move_1 1s infinite; 
                  
                animation:GFG_Move_1 1s infinite; 
            } 
              
            /* For Opera, Chrome, Safari*/ 
            @-webkit-keyframes GFG_Move_1 { 
                from { 
                    left:0px; 
                } 
                to { 
                    left:90px; 
                } 
            } 
              
            /* For Opera, Chrome, Safari */ 
            @-webkit-keyframes GFG_Move_2 { 
                from { 
                    top:0px;  
                    background:green;  
                    width:100px; 
                } 
                to { 
                    top:200px;  
                    background:yellow;  
                    width:150px;  
                    height:150px; 
                } 
            } 
              
            @keyframes GFG_Move_1 { 
                from { 
                    left:0px; 
                } 
                to { 
                    left:95px; 
                } 
            } 
              
            @keyframes GFG_Move_2 { 
                from { 
                    top:0px;  
                    background:green;  
                    width:100px; 
                } 
                to { 
                    top:200px;  
                    background:yellow;  
                    width:150px;  
                    height:150px; 
                } 
            } 
        </style> 
    </head> 
      
    <body align="center"> 
          
        <button onclick="myGeeks()"> 
            Change Animation 
        </button> 
          
        <p> 
            Click on button to change the animation. 
        </p> 
        <script> 
            function myGeeks() { 
                  
                /* For Opera, Chrome, Safari */ 
                document.getElementById("GFG").style.WebkitAnimation 
                        = "GFG_Move_2 4s 2"  
                document.getElementById("GFG").style.animation 
                        = "GFG_Move_2 4s 2"; 
            } 
        </script> 
          
        <div id = "GFG">GFG</div> 
    </body> 
</html>

輸出：

之前單擊按鈕：
單擊按鈕後：

支持的瀏覽器：樣式動畫屬性支持的瀏覽器如下：

Google Chrome 43.0、4.0 -webkit-
Internet Explorer 10.0
Mozila firefox 16.0、5.0 -moz-
Opera 30.0、15.0 -webkit-，12.1、12.0 -o-
Safari 9.0、4.0 -webkit-

相關用法

注：本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 HTML | DOM Style animation Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。