CSS过渡如何控制多个状态_transition简写属性应用

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS过渡如何控制多个状态_transition简写属性应用

2025-11-23

浏览次数：次

返回列表

transition 简写属性可同时控制多个CSS属性的过渡效果，语法为 transition: property duration timing-function delay；通过逗号分隔可为不同属性设置独立过渡，常用于 hover、focus 等状态变化，提升界面流畅性；建议优先使用 transform 和 opacity 避免重排，合理配置缓动与延迟以优化体验。

css过渡如何控制多个状态_transition简写属性应用

CSS 中的 transition 简写属性可以同时控制多个过渡效果，适用于元素在不同状态间的变化，比如 hover、focus 或 class 切换。合理使用 transition 能让界面更自然流畅。

transition 简写语法结构

transition 属性的完整简写格式为：

transition: property duration timing-function delay;

各部分含义如下：

property：指定要过渡的 CSS 属性，如 width、opacity，也可用 all 表示所有可动画属性
duration：过渡持续时间，单位为秒（s）或毫秒（ms）
timing-function：控制过渡的速度曲线，如 ease、linear、ease-in-out
delay：过渡开始前的延迟时间

这些值可以省略部分，默认值分别为：all 0s ease 0s。

同时控制多个属性的过渡

如果希望多个属性有不同的过渡设置，可以在一个声明中用逗号分隔多个 transition 规则。

transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, width 0.4s linear;

上面的例子中：

opacity 变化快，0.3 秒内完成，使用默认缓动
transform 过渡稍慢，且有自定义缓动和 0.1 秒延迟
width 使用线性变化，持续 0.4 秒

这样能精细控制每个属性的动画行为，避免统一过渡带来的生硬感。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

查看详情

常见状态切换中的应用

transition 常用于响应用户交互，例如鼠标悬停（:hover）、获得焦点（:focus）等。

示例：按钮在 hover 时改变背景色和位移：

.button { background: #007bff; padding: 10px 20px; transition: background-color 0.3s ease, transform 0.2s ease; } .button:hover { background-color: #0056b3; transform: translateY(-2px); }

这里两个属性独立过渡。背景色渐变，同时轻微上移，视觉更生动。