CSS 属性

CSS transition-property 属性指定哪些 CSS 属性应用过渡效果。

注意:如果 transition-duration 属性设置为 0，过渡将不会产生任何效果。

属性值

  • none: 不会发生过渡对于任何属性。

  • all: 每个可以转换的属性都会。

  • <custom-ident>: 一个字符串，指示哪个属性在其值更改时应具有过渡效果。

适用范围

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

当使用简写属性（例如背景）时，其所有支持动画的普通子属性都将被动画化。

语法

关键字值

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">鼠标悬停看效果</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">鼠标悬停看效果</div>
</body>
</html>

CSS transition-property: <custom-ident> 

以下示例演示如何使用 CSS 自定义属性 (--pink-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">鼠标悬停看效果</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">鼠标悬停看效果</div>
</body>
</html>