如何用纯CSS实现带初始状态的元素悬停动画（无需增减类）

完全可以用纯CSS实现，不需要通过JS添加/移除类，核心思路是利用CSS动画的forwards属性保持状态，结合:hover和:not(:hover)伪类触发对应动画。

实现代码 #

HTML结构

<div class="containerA">
  <div class="elementA">示例内容</div>
</div>

CSS样式

/* 容器样式，按需调整宽高，确保能触发悬停 */
.containerA {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  position: relative;
}

/* 目标元素初始状态 */
.elementA {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-5px, 5px); /* 初始平移位置 */
  opacity: 0; /* 初始透明 */
}

/* 悬停容器时，触发进入动画 */
.containerA:hover .elementA {
  animation: hoverIn 0.5s forwards;
}

/* 鼠标离开容器时，触发离开动画 */
.containerA:not(:hover) .elementA {
  animation: hoverOut 0.5s forwards;
}

/* 进入动画：从初始位置平移到原点，同时显示 */
@keyframes hoverIn {
  from {
    transform: translate(-5px, 5px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* 离开动画：仅隐藏，保持当前位置不变 */
@keyframes hoverOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(0, 0); /* 强制保持位置 */
  }
}

效果说明 #

• 初始状态：elementA处于(-5px, 5px)位置，透明度为0；
• 悬停containerA：elementA在0.5秒内平移到(0, 0)，同时透明度从0变为1；
• 鼠标离开：elementA在0.5秒内透明度从1变为0，位置保持在(0, 0)不变。

关键是forwards属性让动画结束后保持关键帧的最终状态，确保离开后元素不会回到初始平移位置，完全匹配你的需求。

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