HTML | DOM 样式 animationDelay 属性

HTML DOM 中的animationDelay 属性用于设置或返回动画应该开始的延迟。

句法：

• 它用于设置 animationDelay 属性：

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

• 它用于返回 animationDelay 属性：

  object.style.animationDelay

适当的价值：

• time：用于定义动画延迟的秒数或毫秒数。默认值为 0。
• 初始值：用于将属性设置为其默认值。
• 继承：用于从其父级继承属性。

示例 1：动画延迟 3 秒，使用时间属性值。

  

    
        HTML DOM animationDelay Property
    
    
        div {
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
            -webkit-animation: move_1 2s infinite;
            /* For Chrome, Safari, Opera*/
            animation: move_1 2s infinite;
        }
        /* For Chrome, Safari, Opera */
          
        @-webkit-keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
          
        @keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
        /* For Chrome, Safari, Opera */
          
        @-webkit-keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
                height: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                height: 100px;
                background: blue;
            }
        }
          
        @keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
                height: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                height: 100px;
                background: blue;
            }
        }
    

  

  
      
            GeeksForGeeks  
        
  
    DOM animationDelay Property
    
        Click Here
    
    
    
    
  
    
        function Geeks() {
  
            // Changing the animation name.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationName = 
              "move_2";
            
            // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationName = 
              "move_2";
            
            // Changing the animation delay.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationDelay = 
              "3s";
            
            // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationDelay = 
              "3s";
        }
    

  

输出

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

示例 2：动画延迟 3 秒。

  

    
        HTML DOM animationDelay Property
    
    
        div {
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
            -webkit-animation: move_1 2s infinite;
            /* For Chrome, Safari, Opera*/
            animation: move_1 2s infinite;
        }
        /* For Chrome, Safari, Opera */
          
        @-webkit-keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
          
        @keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
        /* For Chrome, Safari, Opera */
          
        @-webkit-keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                background: blue;
            }
        }
          
        @keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                background: blue;
            }
        }
    

  

  
      
            GeeksForGeeks  
        
  
    DOM animationDelay Property
    
        Click Here
    
    
    
    
  
    
        function Geeks() {
            
            // Changing the animation name.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationName = 
              "move_2"; 
            
            // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationName = 
              "move_2";
            
            // Changing the animation Delay.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationDelay = 
              "3s"; 
            
             // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationDelay =
              "3s";
        }
    

  

输出

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

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

• 谷歌浏览器：43.0
• Mozilla Firefox：16.0、5.0 moz
• 歌剧：30.0
• Safari：9.0