CSS动画结束hover状态后无法反向播放的问题如何解决？

原有方案不生效的核心问题 #

• 非hover状态下未定义::after伪元素的基础样式：content、显示属性、初始状态完全缺失，导致hover结束后伪元素直接被销毁，无法触发反向动画
• 选择器写法错误：div::after:not(:hover)的逻辑不成立，hover是作用在宿主元素div上的，正确写法应为div:not(:hover)::after
• 无必要混用transition和animation：你的需求是两个固定状态的平滑切换，用transition实现更简单，不需要额外编写关键帧动画

推荐解决方案（基于transition实现） #

该方案逻辑更简洁，性能更好，直接符合自动反向过渡的需求：

html {
  background-color: black;
}

div {
  position: relative;
  width: 50vw;
}

/* 定义::after基础样式与非hover初始状态 */
div::after {
  position: absolute;
  content: " ";
  height: 50px;
  width: 50px;
  top: 50%;
  right: 0;
  border: solid rgb(255, 255, 255);
  border-width: 0 10px 10px 0;
  display: inline-block;
  /* 初始状态对应原fadeMain的from帧 */
  opacity: 0;
  transform: translateX(0px) rotate(-45deg);
  /* 所有属性变化绑定过渡效果，时长、缓动与原需求一致 */
  transition: all 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* hover状态仅需定义变化后的属性 */
div:hover::after {
  opacity: 1;
  transform: translateX(20px) rotate(-45deg);
}

修改后触发hover时会自动从初始状态过渡到hover状态，结束hover时会自动反向过渡回初始状态，完全符合需求。

可选方案（基于animation实现） #

如果需要保留关键帧动画的写法，修正后的代码如下：

html {
  background-color: black;
}

div {
  position: relative;
  width: 50vw;
}

div::after {
  position: absolute;
  content: " ";
  height: 50px;
  width: 50px;
  top: 50%;
  right: 0;
  border: solid rgb(255, 255, 255);
  border-width: 0 10px 10px 0;
  display: inline-block;
  /* 非hover状态播放反向动画，forwards保证停在动画最后一帧 */
  animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) reverse forwards;
}

div:hover::after {
  /* hover状态播放正向动画 */
  animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

@keyframes fadeMain {
  from {
    opacity: 0;
    transform: translateX(0px) rotate(-45deg);
  }
  to {
    opacity: 1;
    transform: translateX(20px) rotate(-45deg);
  }
}

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