当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

CSS transition-property用法及代码示例


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

用法: 

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

属性值：


  • none:此值用于指定没有属性将获得过渡效果。

    用法: 

    transition-property:none;

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

    <!DOCTYPE html> 
<html> 
  <head> 
    <title>CSS transition-property property</title> 
    <style> 
      .box{ 
        background-color:red; 
        width:300px; 
        height:200px; 
        margin:auto; 
        transition-property:none; 
        transition-duration:2s; 
      } 
  
      .box:hover{ 
        background-color:pink; 
        width:200px; 
        height:150px; 
      } 
  
      h1, h2{ 
        color:green; 
        text-align:center; 
      } 
    </style> 
  </head> 
  
  <body> 
    <h1>Geeks For Geeks</h1> 
    <h2>transition-property:none</h2> 
    <div class="box"></div> 
  </body> 
</html>

    输出：

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

    用法: 

    transition-property:all;

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

    <!DOCTYPE html> 
<html> 
  <head> 
    <title>CSS transition-property property</title> 
    <style> 
      .box{ 
        background-color:red; 
        width:300px; 
        height:200px; 
        margin:auto; 
        transition-property:all; 
        transition-duration:2s; 
      } 
  
      .box:hover{ 
        background-color:pink; 
        width:200px; 
        height:150px; 
      } 
  
      h1, h2{ 
        color:green; 
        text-align:center; 
      } 
    </style> 
  </head> 
  
  <body> 
    <h1>Geeks For Geeks</h1> 
    <h2>transition-property:all</h2> 
    <div class="box"></div> 
  </body> 
</html>

    输出：

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

    用法: 

    transition-property:property;

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


    <!DOCTYPE html> 
<html> 
  <head> 
    <title>CSS transition-property property</title> 
    <style> 
      .box{ 
        background-color:red; 
        width:300px; 
        height:200px; 
        margin:auto; 
        transition-property:background-color, width, height; 
        transition-duration:2s; 
      } 
  
      .box:hover{ 
        background-color:pink; 
        width:200px; 
        height:150px; 
      } 
  
      h1, h2{ 
        color:green; 
        text-align:center; 
      } 
    </style> 
  </head> 
  
  <body> 
    <h1>Geeks For Geeks</h1> 
    <h2> 
     transition-property:  
     background-color, width, height</h2> 
    <div class="box"></div> 
  </body> 
</html>

    输出：

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

    用法: 

    transition-property:initial;

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

    <!DOCTYPE html> 
<html> 
  <head> 
    <title>CSS transition-property property</title> 
    <style> 
      .box{ 
        background-color:red; 
        width:300px; 
        height:200px; 
        margin:auto; 
        transition-property:initial; 
        transition-duration:2s; 
      } 
  
      .box:hover{ 
        background-color:pink; 
        width:200px; 
        height:150px; 
      } 
  
      h1, h2{ 
        color:green; 
        text-align:center; 
      } 
    </style> 
  </head> 
  
  <body> 
    <h1>Geeks For Geeks</h1> 
    <h2>transition-property:initial</h2> 
    <div class="box"></div> 
  </body> 
</html>

    输出：

  • inherit:用于指定此属性将从其父元素继承其值。

    用法: 

    transition-property:inherit;

    例：在下面的示例中，我们将属性值指定为继承，因此该框将继承其属性的transition-property值。但是在这种情况下，其父级的transition-property值将全部为默认值，因为我们尚未为其父级指定该值。因此，所有CSS属性都将发生过渡效果。

    <!DOCTYPE html> 
<html> 
  <head> 
    <title>CSS transition-property property</title> 
    <style> 
      .box{ 
        background-color:red; 
        width:300px; 
        height:200px; 
        margin:auto; 
        transition-property:inherit; 
        transition-duration:2s; 
      } 
  
      .box:hover{ 
        background-color:pink; 
        width:200px; 
        height:150px; 
      } 
  
      h1, h2{ 
        color:green; 
        text-align:center; 
      } 
    </style> 
  </head> 
  
  <body> 
    <h1>Geeks For Geeks</h1> 
    <h2>transition-property:inherit</h2> 
    <div class="box"></div> 
  </body> 
</html>

    输出：

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

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


相关用法


注：本文由纯净天空筛选整理自rituraj_jain大神的英文原创作品 CSS | transition-property Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。