当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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