transition-property

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

transition-property CSS 属性设置将应用过渡效果的 CSS 属性。

试一试

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

如果你指定一个缩写属性（例如，background），它所有可动画化的长式子属性都将被动画化。

语法

css

/* Keyword values */
transition-property: none;
transition-property: all;

/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

值

none: 没有属性会进行过渡。
all: 所有可过渡的属性都将过渡。
<custom-ident>: 一个字符串，用于标识当其值改变时应应用过渡效果的属性。

正式定义

初始值	all
应用于	所有元素，`::before` 和 `::after` 伪元素
继承性	否
计算值	同指定值
动画类型	不可动画化

正式语法

transition-property = 
  none                           |
  <single-transition-property>#  

<single-transition-property> = 
  all             |
  <custom-ident>

示例

基本示例

当按钮被悬停或聚焦时，它会经历一个一秒钟的颜色过渡；transition-property 是 background-color。

HTML

html

<button class="target">Focus me!</button>

CSS

html {
  height: 100vh;
}

button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  outline: none;
}

css

.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #cccccc;
}

.target:hover,
.target:focus {
  background-color: #eeeeee;
}

有关更多 transition-property 示例，请参阅我们的使用 CSS 过渡指南。

规范

规范
CSS 过渡 # transition-property-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由MDN 贡献者于2025 年 8 月 13 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题