使用CSS动画修改div背景色alpha值，如何维持hover后的状态？

你的核心问题是CSS动画执行完毕后没有保留最终状态——默认情况下animation-fill-mode值为none，动画结束后元素会立刻回到初始样式；再加上你给:not(:hover)绑定了反向动画，导致hover动画一结束就触发反向效果，颜色被强制重置。

给你两种实用解决思路：

方法一：调整动画的填充模式 #

给hover状态的动画添加animation-fill-mode: forwards，强制动画结束后保持最后一帧的样式；同时确保反向动画仅在鼠标移出时触发：

/* 初始样式 */
.target-div {
  background-color: rgba(255, 0, 0, 0.2);
}

/* hover时的淡入动画 */
.target-div:hover {
  animation: fadeInAlpha 0.3s forwards; /* forwards 保留动画结束状态 */
}

/* 鼠标移出时的淡出动画 */
.target-div:not(:hover) {
  animation: fadeOutAlpha 0.3s forwards;
}

/* 定义动画关键帧 */
@keyframes fadeInAlpha {
  to {
    background-color: rgba(255, 0, 0, 0.8);
  }
}

@keyframes fadeOutAlpha {
  to {
    background-color: rgba(255, 0, 0, 0.2);
  }
}

方法二：改用transition实现（更简洁） #

如果只是简单的alpha值过渡，用transition比CSS动画更省心——它会自动处理hover和移出的状态切换，不需要额外处理填充模式：

.target-div {
  background-color: rgba(255, 0, 0, 0.2);
  transition: background-color 0.3s ease; /* 定义过渡属性和时长 */
}

.target-div:hover {
  background-color: rgba(255, 0, 0, 0.8);
}

这种写法无需写关键帧，代码更简洁，也不会出现动画结束后重置的问题。

内容的提问来源于stack exchange，提问作者bob.dobbs