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


HTML Style animationDirection用法及代码示例

animationDirection属性用于设置或返回动画方向。如果将动画设置为仅放置一次,则此属性无效。

用法:

  • 它返回animationDirection属性。
    object.style.animationDirection;
  • 它用于设置animationDirection属性。
    object.style.animationDirection = "normal|reverse|alternate|
    alternate-reverse|initial|inherit"

属性值:下面列出了animationDirection属性值:


  • normal:此属性以正向播放动画。它是默认值。
  • reverse:此动画属性以相反的方向播放动画。
  • alternate:此动画属性以交替顺序向前和向后播放动画。
  • alternate-reverse:此动画属性首先向后播放动画,然后向前播放。
  • initial:此属性用于将animationDirection属性设置为其默认值。
  • inherit:此属性用于从其父元素继承animationDirection属性。

范例1:

  • 编程:
    <!DOCTYPE html> 
    <html> 
          
    <head> 
        <style>  
            div { 
                color:green; 
                font-size:70px; 
                font-weight:bold; 
                position:relative; 
                  
                 /* Chrome, Safari, Opera */ 
                -webkit-animation:animate 3s infinite; 
                animation:animate 3s infinite; 
            } 
              
            /* Chrome, Safari, Opera */ 
            @-webkit-keyframes animate { 
                from {top:0px;} 
                to {top:200px;} 
            } 
              
            @keyframes animate { 
                from {top:0px;} 
                to {top:200px;} 
            } 
        </style> 
    </head> 
      
    <body> 
          
        <button onclick = "myGeeks()"> 
            Click Here! 
        </button> 
          
        <div id = "GFG"> 
            GeeksforGeeks 
        </div> 
          
        <script> 
        function myGeeks() { 
              
            // Code for Chrome, Safari, and Opera 
            document.getElementById("GFG").style.WebkitAnimationDirection 
                    = "normal";  
                      
            document.getElementById("GFG").style.animationDirection 
                    = "normal"; 
        } 
        </script> 
    </body> 
      
    </html>                               
  • 输出:

示例2:

  • 编程:
    <!DOCTYPE html> 
    <html> 
          
    <head> 
        <style>  
            div { 
                color:green; 
                font-size:70px; 
                font-weight:bold; 
                position:relative; 
                  
                 /* Chrome, Safari, Opera */ 
                -webkit-animation:animate 3s infinite; 
                animation:animate 3s infinite; 
            } 
              
            /* Chrome, Safari, Opera */ 
            @-webkit-keyframes animate { 
                from {top:0px;} 
                to {top:200px;} 
            } 
              
            @keyframes animate { 
                from {top:0px;} 
                to {top:200px;} 
            } 
        </style> 
    </head> 
      
    <body> 
          
        <button onclick = "myGeeks()"> 
            Click Here! 
        </button> 
          
        <div id = "GFG"> 
            GeeksforGeeks 
        </div> 
          
        <script> 
        function myGeeks() { 
              
            // Code for Chrome, Safari, and Opera 
            document.getElementById("GFG").style.WebkitAnimationDirection 
                    = "reverse";  
                      
            document.getElementById("GFG").style.animationDirection 
                    = "reverse"; 
        } 
        </script> 
    </body> 
      
    </html>                           
  • 输出:

范例3:

  • 编程:
    <!DOCTYPE html> 
    <html> 
          
    <head> 
        <style>  
            div { 
                color:green; 
                font-size:70px; 
                font-weight:bold; 
                position:relative; 
                  
                 /* Chrome, Safari, Opera */ 
                -webkit-animation:animate 3s infinite; 
                animation:animate 3s infinite; 
            } 
              
            /* Chrome, Safari, Opera */ 
            @-webkit-keyframes animate { 
                from {top:0px;} 
                to {top:200px;} 
            } 
              
            @keyframes animate { 
                from {top:0px;} 
                to {top:200px;} 
            } 
        </style> 
    </head> 
      
    <body> 
          
        <button onclick = "myGeeks()"> 
            Click Here! 
        </

支持的浏览器:下面列出了DOM animationDirection属性支持的浏览器:

  • 谷歌浏览器43.0
  • Firefox 16.0、5.0 Moz
  • Safari 9.0
  • Opera 30.0


相关用法

注:本文由纯净天空筛选整理自chaitanyashah707大神的英文原创作品 HTML | DOM Style animationDirection Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。