CSS | transition-property 属性

过渡效果用于显示元素属性在指定持续时间内的变化。 transition-property属性用于指定将发生过渡效果的 CSS 属性的名称。

句法：

transition-property: none | all | property | initial | inherit;

属性值：

• none：该值用于指定没有属性会获得过渡效果。

  句法：

  transition-property: none;
  

  示例：在下面的示例中，我们已指定所有属性都不会获得过渡效果。因此，如果我们将鼠标悬停在框上，其属性的变化将是突然的，而不是在指定的持续时间内从一个值转换到另一个值。

  
  
    
      
      
    
    
    
      
  Geeks For Geeks
      
  transition-property: none
      
  
    
  
  

  输出：

  

• all：所有的 CSS 属性都会获得过渡效果。这也是此属性的默认值。

  句法：

  transition-property: all;
  

  示例：除了指定我们需要过渡效果的所有属性的名称之外，我们还可以为 transition-property使用 all 值。这将允许我们显示所有属性的过渡效果，而无需单独指定它们的名称，如下例所示：

  
  
    
      
      
    
    
    
      
  Geeks For Geeks
      
  transition-property: all
      
  
    
  
  

  输出：

  

• property：我们可以指定将应用过渡效果的 CSS 属性的名称。我们还可以通过用逗号分隔来指定多个属性。

  句法：

  transition-property: property;
  

  示例：我们在下面的示例中为过渡效果(即背景颜色、宽度和高度)指定了多个属性，用逗号分隔它们。因此，当我们将鼠标悬停在框上时，我们可以看到框属性中的转换。

  
  
    
      
      
    
    
    
      
  Geeks For Geeks
      
  
       transition-property: 
       background-color, width, height
      
  
    
  
  

  输出：

  

• initial：用于将此属性设置为其默认值。当我们不知道特定属性的默认值时，此值很有用。

  句法：

  transition-property: initial;
  

  示例：由于我们在下面的示例中将属性值指定为初始值，因此该属性的默认值(即all )将分配给transition-property 。因此，当我们将鼠标悬停在框上时，所有 CSS 属性都会发生过渡效果。

  
  
    
      
      
    
    
    
      
  Geeks For Geeks
      
  transition-property: initial
      
  
    
  
  

  输出：

  

• 继承：用于指定该属性将从其父元素继承其值。

  句法：

  transition-property: inherit;
  

  示例：由于我们在下面的示例中指定了属性值继承，因此框将继承其属性的 transition-property 值。但在这种情况下，其父级的 transition-property值将是全部(因为它是默认值)，因为我们没有为其父级指定值。因此，所有 CSS 属性都会出现过渡效果。

  
  
    
      
      
    
    
    
      
  Geeks For Geeks
      
  transition-property: inherit
      
  
    
  
  

  输出：

  

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

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器