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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。