CSS | transition-duration 属性

CSS 中的 transition-duration 属性用于指定完成过渡效果的时间长度(以秒或毫秒为单位)。

句法：

transition-duration: time|initial|inherit;

属性值：

• time：用于指定完成过渡动画的时间长度(以秒或毫秒为单位)。

  句法：

  transition-duration: time;

  例子：

   
   
       
           
            
           
       
        
       
            
          
  GeeksforGeeks
   
            
          
  Transition Property
   
            
          
   
              
  transition-duration: 5s
   
          
   
       
                                     
  

  输出：

  • 过渡前：
    
  • 过渡后：
    
• initial：用于将 transition-duration 属性设置为其默认值。 transition-duration 的默认值为 0。

  句法：

  transition-duration: initial;

  例子：

   
   
       
           
            
           
       
        
       
            
          
  GeeksforGeeks
   
            
          
  Transition Property
   
            
          
   
              
  transition-duration: initial;
   
          
   
       
                                  
  

  输出：

  • 过渡前：
    
  • 过渡后：
    
• 继承：从其父级设置的过渡持续时间属性的值。

  句法：

  transition-duration: inherit;

  示例 3：

   
   
       
           
            
           
       
        
       
            
          
  GeeksforGeeks
   
            
          
  Transition Property
   
            
          
   
              
  transition-duration: inherit
   
          
   
       
                      
  

  输出：

  • 过渡前：
    

    输出：

  • 过渡后：
    

支持的浏览器： transition-duration 属性支持的浏览器如下：

• Chrome 26.0, 4.0 -webkit-
• 边缘 10.0
• 火狐 16.0, 4.0 -moz-
• 歌剧 12.1, 10.5 -o-
• Safari 6.1, 3.1 -webkit-