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>

打印页面