为什么我的CSS transition移入生效、移出反向过渡不生效？

开发者阿泽

2026-10-5

问题原因

你将transition相关属性写在了nav:hover .logobg的伪类触发规则中，仅当nav处于hover状态时，.logobg元素才会被赋予过渡配置：

hover触发时，元素有过渡属性，所以位移动画正常
移出hover状态时，.logobg匹配的是默认样式规则，你没有在默认规则中定义过渡属性，所以属性变更直接生效，就出现了瞬移回落的问题。

同理你的.navelements背景色过渡也存在同样的问题，目前仅hover变色时有过渡，移出时也会直接跳回红色。

修复方案

把过渡属性从hover触发的规则中，移动到对应元素的默认样式规则里即可，修改后的核心代码如下：

/* logobg默认规则添加过渡 */
.logobg {
  width: 150px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition-duration: 1000ms;
  transition-timing-function: ease-in-out;
}

/* hover规则仅定义变更的属性，删除过渡配置 */
nav:hover .logobg {
  left: 0;
  transform: translateX(0);
}

/* navelements默认规则添加过渡 */
.navelements {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: red;
  height: 100%;
  transition-duration: 300ms;
}

/* hover规则仅定义背景色变更 */
.navelements:hover {
  background: #303030;
}