尝试一下

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

#example-element {

background-color: #e4f0f5;

color: #000;

padding: 1rem;

border-radius: 0.5rem;

font: 1em monospace;

width: 100%;

transition: margin-right 2s;

}

#default-example:hover > #example-element {

background-color: #909;

color: #fff;

margin-right: 40%;

}

如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。

语法

css/* Keyword values */

transition-property: none;

transition-property: all;

transition-property: test_05;

transition-property: -specific;

transition-property: sliding-vertically;

transition-property: test1;

transition-property: test1, animation4;

transition-property: all, height, all;

transition-property:

all,

-moz-specific,

sliding;

/* Global values */

transition-property: inherit;

transition-property: initial;

transition-property: unset;

取值

none

没有过渡动画。

all

所有可被动画的属性都表现出过渡动画。

IDENT

属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

形式定义

初始值所有适用元素all elements, ::before and ::after pseudo-elements是否是继承属性否计算值as specified动画类型Not animatable

形式语法

transition-property = none | # = all |

此语法反映了基于 CSS Transitions Module Level 1 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。

示例

在 CSS 过渡中有几个示例可以参考。

规范

规范

CSS Transitions Module Level 1# transition-property-property

浏览器兼容性

参见

使用 CSS 过渡

TransitionEvent

帮助改进 MDN

此页面对您有帮助吗？

是

否

了解如何参与贡献

此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。

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