如何使用动画 html css 保持悬停状态 w

Question

我需要在单击动画时保持悬停状态。

当我将鼠标悬停在父 div 上时，子元素应该平移为 -10px，我需要在单击父元素时保持平移 -10px 并对子元素执行摇动动画。但是当我单击父元素时，子元素丢失了它的翻译属性并返回到其初始状态，并且在摇动动画完成后它返回到翻译-10px。

我需要在父元素点击时执行摇动动画，同时保留translateY -10px。

这是演示。

.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: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

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

Answer 1

.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: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

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