如何通过css transition-property指定过渡属性-css教程-PHP中文网

如何通过css transition-property指定过渡属性

P粉602998670

发布： 2025-10-01 20:52:02

原创

461人浏览过

transition-property用于指定参与过渡的CSS属性，可选值为none、all或具体属性名，如width、opacity等。通过精确控制属性，避免不必要的动画，提升性能。例如设置transition-property: width, background-color，仅这两项属性会触发过渡效果。实际开发中常与transition简写结合使用，如transition: transform 0.3s ease，确保只有transform产生动画，其他属性如color即时生效。需注意仅可动画属性（如transform、color）支持过渡，display、z-index等不支持，且属性名拼写必须正确。使用all可能引发意外动画，影响体验，因此推荐明确指定所需属性，使动画更精准流畅。

如何通过css transition-property指定过渡属性

在使用 CSS 过渡效果时，transition-property 用于指定哪个 CSS 属性应该参与过渡动画。如果不希望所有可动画的属性都触发过渡，就可以通过它来精确控制。

transition-property 的基本语法

该属性定义了将要应用过渡效果的一个或多个 CSS 属性名称。其基本写法如下：

transition-property: none | all | <property-name> [, <property-name>]*;

你可以传入具体的属性名（如 width、opacity），也可以使用 all 表示所有可动画属性，或者 none 表示不应用过渡。

常见可过渡属性举例

以下是一些常用于过渡的属性：

立即学习“前端免费学习笔记（深入）”；

opacity：控制透明度变化
transform：实现位移、旋转、缩放等
width / height：尺寸变化
background-color：背景色渐变
color：文字颜色过渡
margin / padding：间距调整动画

例如，只想让宽度和背景色产生过渡：

通义视频

通义万相AI视频生成工具

查看详情

.box {
transition-property: width, background-color;
transition-duration: 0.5s;
}

与 transition 简写结合使用

实际开发中，通常会用简写的 transition 属性来同时设置多个参数。但明确指定 transition-property 能避免不必要的动画。

比如只对 transform 做过渡，其他属性立即生效：

.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
  color: red; /* color 不会过渡，因为未包含在 transition-property 中 */
}