CSS | transition-property 属性

CSS 的 transition-property 属性用于指定应该过渡动画的 CSS 属性。当属性值发生变化时，可以实现过渡效果。

语法

transition-property: none|all|property;

• none：默认值，表示没有属性需要过渡动画。
• all：表示所有属性都应该过渡动画。
• property：表示指定属性需要过渡动画，可以是一个或多个。

示例

div {
  width: 100px;
  height: 100px;
  background-color: #abc;
  transition-property: background-color;
  transition-duration: 1s;
}

div:hover {
  background-color: #def;
}

在上面的示例中，当鼠标悬停在 div 上时，背景颜色将在 1 秒钟内从 #abc 过渡到 #def。

支持的属性

下面是常见的 CSS 属性，它们都可以通过 transition-property 实现过渡动画效果：

• background-color: 背景颜色
• color: 文字颜色
• opacity: 不透明度
• transform: 转换效果，如旋转、缩放、移动等
• box-shadow: 阴影
• border: 边框
• border-radius: 圆角
• height: 高度
• width: 宽度
• font-size: 字体大小
• letter-spacing: 字符间距
• line-height: 行高
• margin: 外边距
• padding: 内边距

注意事项

• 如果同时对多个属性指定过渡效果，可以使用逗号分隔。
• transition-duration 属性用于指定过渡动画的持续时间，transition-delay 属性用于指定过渡动画开始前的延迟时间。
• 对于一些不易产生渐变效果的属性，如 display、position、top、bottom 等，无论指定何种过渡效果，都不会产生过渡效果。