试一试
transition-property: margin-right;
transition-property: margin-right, color;
transition-property: all;
transition-property: none;
the transition.
#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;
/*
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
所有可过渡的属性都将过渡。
一个字符串，用于标识当其值改变时应应用过渡效果的属性。
正式定义
初始值all应用于所有元素，::before 和 ::after 伪元素继承性否计算值同指定值动画类型不可动画化
正式语法
transition-property = none |
此语法反映了根据 CSS 过渡的最新标准。并非所有浏览器都可能实现了所有部分。有关支持信息，请参阅浏览器兼容性。
示例
基本示例
当按钮被悬停或聚焦时，它会经历一个一秒钟的颜色过渡；transition-property 是 background-color。
HTML
html
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
浏览器兼容性
加载中…
另见
使用 CSS 过渡
transition
transition-duration
transition-timing-function
transition-delay
TransitionEvent
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何贡献 本页面最后由MDN 贡献者于2025 年 8 月 13 日修改。
在 GitHub 上查看此页面 • 报告此内容的问题