HTML | DOM 样式 transitionDuration 属性

HTML DOM 中的Style transitionDuration属性用于设置或返回完成过渡效果的时间长度（以秒或毫秒为单位）。

句法：

返回 transitionDuration 属性：

object.style.transitionDuration

设置 transitionDuration：

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

属性值：

• time：用于指定完成过渡效果需要多长时间。默认值为0（无过渡效果）。
• 初始：将元素设置为其初始位置。
• 继承：用于从其父元素设置属性。

示例：设置transitionDuration属性。

  

    
        HTML | DOM Style transitionDuration Property
    
    
        #element {
            width: 100px;
            height: 70px;
            background: green;
            transition-property: width;
        }
          
        #element:hover {
            width: 400px;
            height: 100px;
        }
    

  

    GeeksforGeeks
  
    TransitionDuration Property
    
      Move mouse over the green box and it will change!
  
  
    
        transition-duration:5s
    
  
    
        function myFunction() {
            
            // Set transitionDuration 5 second.
            document.getElementById(
              "element").style.transitionDuration =
              "5s";
        }
        myFunction()
    

  

输出：

• 过渡前：
  
• 过渡后：
  

支持的浏览器： HTML支持的浏览器 | DOM Style transitionDuration 属性列在下面：

• 谷歌浏览器 26
• 浏览器 10
• 火狐 16
• 歌剧 12.1
• Safari 6.1