如何在HTML/CSS中实现点击动画时保持Hover状态的位移效果

问题核心在于CSS transform属性的覆盖特性：当.parent:active .child触发动画时，动画内的transform会直接覆盖.parent:hover .child中的transform: translateY(-10px)，导致元素回到初始位置。要解决这个问题，需要把位移和旋转动画合并到同一个transform声明中，让动画执行期间同时保留上移效果。

修改后的代码如下：

CSS 代码 #

.parent {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 50px;
  height: 50px;
  background-color: green;
  transition: 1s ease;
}

.parent:hover .child {
  transform: translateY(-10px);
}
.parent:active .child {
  animation: shake 1s;
}

@keyframes shake {
  0% {
    transform: translateY(-10px) rotate(-10deg);
  }
  50% {
    transform: translateY(-10px) rotate(10deg);
  }
  100% {
    transform: translateY(-10px) rotate(0deg);
  }
}

HTML 代码 #

<div class="parent">
    <div class="child"></div>
</div>

关键修改说明 #

• 在shake动画的每一个关键帧中，将translateY(-10px)与rotate()变换合并到同一个transform属性中。这样动画执行时，元素既保持上移状态，又能执行旋转摇晃效果。
• 动画结束后，元素会回到100%关键帧的状态（translateY(-10px) rotate(0deg)），和hover状态的位移完全一致，不会出现跳回初始位置的问题。

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