HTML | DOM 样式 animationDuration 属性

HTML DOM 中的 Style animationDuration属性用于设置完成一个动画循环的时间间隔。

句法：

• 它返回 animationDuration 属性。

  object.style.animationDuration

• 它设置 animationDuration 属性。

  object.style.animationDuration = "time|initial|inherit"

属性值：

• time：用于指定动画完成一个循环的时间长度。默认值为 0，即不显示动画。
• initial：用于将样式 animationDuration 属性设置为其默认值。
• 继承：它从其父级继承样式 animationDuration 属性。

供应商前缀：为了浏览器兼容性，许多 Web 开发人员使用扩展程序添加特定于浏览器的属性，例如 -webkit- 用于 Safari、Google Chrome 和 Opera，-ms- 用于 Internet Explorer，-moz- 用于 Firefox，-o- 用于旧版本Opera 等。如果浏览器不支持任何扩展，它会简单地忽略它。

示例 1：

    
        
            HTML DOM Style animationDuration Property
        
          
         
            div {
                width: 100px;
                height: 100px;
                background:#32CD32;
                position: relative;
                  
                /*For Chrome, Safari, Opera browsers */
                /* animation name geeks */
                /* infinite animation iteration */
                -webkit-animation: geeks 5s infinite;
                  
                animation: geeks 5s infinite; 
            }
          
            /* Used for Chrome, Safari, Opera */
            @-webkit-keyframes geeks {
                from {
                    left: 0px;
                    top:20px;
                }
                to {
                    left: 300px;
                    top:20px;
                }
            }
            @keyframes geeks {
                from {
                    left: 0px;
                    top:20px;
                }
                to {
                    left: 300px;
                    top:20px;
                }
            }
        
    
      
    
        
            Click the button to speed up the duration of animation
        
          
        
        function myGeeks() {
                  
            /* For Chrome, Safari, and Opera browsers */
            document.getElementById("GFG").style.WebkitAnimationDuration = "1s";
            document.getElementById("GFG").style.animationDuration = "1s";
        }
        
          
        
            GeeksforGeeks
        
    
                    

输出：

• 点击按钮前：
• 点击按钮后：

示例 2：

    
        HTML DOM Style animationDuration Property
    
      
    
        div {
            width: 100px;
            height: 100px;
            background:#32CD32;
            position: relative;
              
            /* For Chrome, Safari, Opera */
            /* infinite animation iteration */
            -webkit-animation: mymove 5s infinite;
              
            animation: mymove 5s infinite; 
        }
  
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from {
                left: 0px; 
                background-color: white;
            }
            to {
                left: 200px; 
                background-color: #32CD32;
            }
        }
        @keyframes myanim {
            from {
                left: 0px; 
                background-color: white;
            }
            to {
                left: 200px; 
                background-color: #32CD32;
            }
        }
          
    

  

      
    
        Click the button to speed
        up the duration of animation
    
  
    
        function myGeeks() {
            document.getElementById("GFG").style.WebkitAnimationDuration 
                    = "1s"; 
                  
            document.getElementById("GFG").style.animationDuration = "1s";
        }
    
  
    
        The animation-duration Property
    
      

                    

输出：

• 点击按钮前：
• 点击按钮后：

支持的浏览器： Style animationDuration 属性支持的浏览器如下：

• 火狐 16.0, 5.0 -moz-
• 歌剧 30.0
• 谷歌浏览器 43.0
• Safari 9.0