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


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。