CSS技术问题：如何让hover动画保持状态直至鼠标移出？

问题根源 #

你遇到的问题是因为CSS动画默认在执行完毕后，会回到元素的初始样式——哪怕鼠标还停留在hover状态。这是因为animation-fill-mode属性的默认值是none，它不会保留动画最后一帧的状态，动画结束后元素就恢复到定义的初始width:350px。

方案1：修改动画的填充模式 #

给hover和非hover状态的动画添加animation-fill-mode: forwards，强制动画结束后保持最后一帧的样式：

div {
  height: 90px;
  width: 350px;
  background-color: black;
}

div:hover {
  animation-name: hoverAnimation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; /* 保持动画结束后的宽度 */
}

div:not(:hover) {
  animation-name: stopAnimation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes hoverAnimation {
  from {width: 350px}
  to {width: 400px}
}

@keyframes stopAnimation {
  from {width: 400px}
  to {width: 350px}
}

方案2：用Transition替代Animation（更推荐） #

对于这种简单的「状态切换+过渡」场景，transition比animation更简洁直观，不需要定义关键帧，直接声明过渡属性即可：

div {
  height: 90px;
  width: 350px;
  background-color: black;
  transition: width 0.5s; /* 定义宽度变化的过渡时长 */
}

div:hover {
  width: 400px; /* hover时直接设置目标宽度，自动过渡 */
}

这个方案中，hover时元素会平滑过渡到400px宽度，鼠标移出时又会平滑回到350px，全程保持对应状态，代码量更少，维护更简单。

内容的提问来源于stack exchange，提问作者Sacha Jubinville