CSS - transition-property 屬性

CSS transition-property 屬性指定哪些 CSS 屬性應該應用過渡效果。

注意：如果transition-duration 屬性設定為 0，則過渡將無效。

可能的值

none − 任何屬性都不會發生過渡。
all − 每個可以過渡的屬性都會過渡。
<custom-ident> − 一個字串，指示當屬性值更改時哪個屬性應該具有過渡效果。

應用於

所有元素，::before 和 ::after 偽元素。

使用簡寫屬性（例如，background）時，所有支援動畫的其 longhand 子屬性都將被動畫化。

語法

關鍵字值

transition-property: none;
transition-property: all;

<custom-ident> 值

transition-property: data_05;
transition-property: -data;
transition-property: data-column;

多個值

transition-property: data4, animation5;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

CSS transition-property - none 值

以下示例演示了使用transition-property: none，任何屬性都不會應用過渡效果 −

<html>
<head>
<style>
   .box {
      width: 100px;
      padding: 10px;
      transition-property: none;
      transition-duration: 3s;
      background-color: pink;
   }
   .box:hover,
   .box:focus {
      margin-left: 80px;
      background-color: lightgrey;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - all 值

以下示例演示了使用transition-property: all，過渡效果將應用於所有可以動畫化的屬性 −

<html>
<head>
<style>
   .box {
      width: 100px;
      padding: 5px;
      transition-property: all;
      transition-duration: 3s;
      background-color: lightgray;
   }
   .box:hover,
   .box:focus {
      margin-left: 80px;
      background-color: pink;
      padding: 15px;
      border: 4px solid blue;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - <custom-ident> 值

以下示例演示瞭如何使用 CSS 自定義屬性 (--pink-color) 來定義background-color 屬性上的粉紅色。當您將滑鼠懸停在或聚焦於方塊上時，元素的background-color 會根據自定義屬性的值進行更改 −

<html>
<head>
<style>
   html {
      --pink-color: pink;
   }
   .box {
      width: 100px;
      padding: 10px;
      transition-property:  background-color; 
      transition-duration: 4s;
      background-color: lightgray;
   }
   .box:hover,
   .box:focus {
      background-color: var(--pink-color); 
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - 使用屬性值

以下示例演示了當transition-property 設定為padding時，當您將滑鼠懸停在或聚焦於方塊上時，padding 值將更改為15px −

<html>
<head>
<style>
   .box {
      width: 100px;
      transition-property: padding;
      transition-duration: 3s;
      background-color: lightgray;
   }
   .box:hover,
   .box:focus {
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

列印頁面