在 CSS3 中，你可以通过 transition 属性同时为多个 CSS 属性设置过渡效果，让它们在状态变化时（如悬停、点击）以动画形式平滑变化，而不是瞬间切换。

✅ 一、使用 transition 简写语法设置多个属性

Css深色版本element {  transition: property duration timing-function delay;}

要设置多个属性，只需将每组“属性+效果”用逗号 , 分隔：

语法格式：

Css深色版本transition: 
  属性1 持续时间1 速度曲线1 延迟1,  属性2 持续时间2 速度曲线2 延迟2,  ...;

✅ 二、实用示例

示例 1：按钮同时过渡颜色、大小和阴影

Css深色版本.btn {  background-color: #007bff;  color: white;  padding: 10px 20px;  border: none;  border-radius: 5px;  font-size: 16px;  /* 同时设置多个属性的过渡 */  transition: 
    background-color 0.3s ease,    transform 0.4s ease,    box-shadow 0.5s ease;}.btn:hover {  background-color: #0056b3;  transform: scale(1.1);  box-shadow: 0 10px 20px rgba(0,0,0,0.2);}

✅ 效果：

• 背景色在 0.3s 内变化

• 缩放动画持续 0.4s

• 阴影在 0.5s 内展开

示例 2：卡片悬停时多个属性依次变化（配合延迟）

Css深色版本.card {  opacity: 0.8;  transform: translateY(10px);  width: 200px;  transition: 
    opacity 0.3s ease,    transform 0.6s ease 0.1s,  /* 延迟 0.1s */    width 0.8s linear;}.card:hover {  opacity: 1;  transform: translateY(0);  width: 220px;}

✅ 效果：悬停时，透明度先变化，0.1秒后上移，宽度缓慢拉伸。

示例 3：统一设置所有可动画属性

Css深色版本.box {  transition: all 0.4s ease;}

• all 表示对所有可动画的 CSS 属性应用相同的过渡效果。

• 简洁但不够精确，可能影响性能，建议按需指定属性。

✅ 三、常见可动画属性（支持过渡）

以下属性常用于过渡动画：

⚠️ 注意：display: none/block、visibility 等不可直接过渡，需通过 opacity 和 height 模拟。

✅ 四、最佳实践建议

✅ 五、完整示例：导航菜单项逐个过渡

Html深色版本<nav class="nav">  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">产品</a>
  <a href="#" class="nav-item">关于</a>
</nav>

Css深色版本.nav-item {  display: inline-block;  margin: 0 15px;  color: #333;  text-decoration: none;  /* 多属性过渡 */  transition: 
    color 0.3s ease,    transform 0.4s ease 0.1s,    opacity 0.5s ease;}.nav-item:hover {  color: #007bff;  transform: scale(1.1);  opacity: 0.8;}

✅ 效果：悬停时颜色、大小、透明度同时变化，提升交互质感。

✅ 总结

通过合理设置多个属性的过渡效果，你可以创建出丰富、自然、有层次感的用户界面动画，显著提升用户体验。