如何避免多个CSS transition属性被覆盖？

你的问题核心是CSS层叠规则导致transition属性被覆盖，同时元素默认样式未定义过渡逻辑，所以反向状态变化（比如取消复选框、鼠标移出）时没有动画效果。

解决方案：统一在默认样式中定义过渡规则 #

把所有需要过渡的属性及对应时长放在元素的基础样式里，各个状态选择器只修改目标属性，不再单独重写transition，这样所有状态变化（包括正向和反向）都会应用正确的过渡动画。

修改后的代码如下：

CSS

#square {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  /* 统一定义所有需要过渡的属性及时长 */
  transition: 
    background-color 400ms,
    width 500ms,
    height 600ms;
}

#square:hover {
  background-color: orange;
  /* 继承默认过渡规则，无需单独写transition */
}

#toggleWidth:checked~#square {
  width: 100px;
  /* 继承默认过渡规则 */
}

#toggleHeight:checked~#square {
  height: 100px;
  /* 继承默认过渡规则 */
}

#toggleBorderRadius:checked~#square {
  border-radius: 10px;
  /* 默认过渡未包含此属性，所以无动画，符合需求 */
}

HTML（保持不变）

<input type="checkbox" id="toggleWidth" name="toggleWidth" />
<label for="toggleWidth">Toggle width</label>

<input type="checkbox" id="toggleHeight" name="toggleHeight" />
<label for="toggleHeight">Toggle height</label>

<input type="checkbox" id="toggleBorderRadius" name="toggleBorderRadius" />
<label for="toggleBorderRadius">Toggle border radius (no transition)</label>

<br><br>
<div id="square"></div>

额外说明 #

• 此方法确保所有状态切换（鼠标移入/移出、复选框勾选/取消）都能触发对应属性的过渡动画，不会出现覆盖问题。
• 如果需要某个状态下的过渡时长与默认不同，可以在该选择器中重新完整定义transition（保留所有属性），比如hover时加快背景色过渡：

#square:hover {
  background-color: orange;
  transition: background-color 200ms, width 500ms, height 600ms;
}

内容的提问来源于stack exchange，提问作者Cédric