當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。