How to persist Hover state w with animation html css

Question

I need to persist a hover state while animating a click.

When i hover the parent div the child should translate to -10px, I need to persist that translate -10px while the parent element is clicked and do a shake animation to the child element. But When i click the parent element the child lost it translate property and go back to its initial state and after the shake animation completes it going back to translate -10px.

I need to do the shake animation when the parent element click while persisting the translateY -10px.

Here is the demo.

.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

One way to achieve this is by using the rotate property, instead of using the rotate built in to the transform property.

This way, you simply don't need to add transform: translateY(-10px) into the :active selector. Otherwise, you would have to declare translateY(-10px) into every keyframe of the animation.

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

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