reverse an animation after div:hover

Question

How do I:

• make the hover effect of margin-top: -10px stay present when the mouse stays hovered over the element
• reverse the animation smoothly when the mouse moves out of a hover position?

Help appreciated, please.

@keyframes shift-up {
    from {margin-top: 0px;}
    to {margin-top: -10px;}
}
.owl-stage {padding-top: 10px;}
.owl-item:hover {
    animation-name: shift-up;
    animation-duration: 0.5s;
}
.owl-item {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="owl-stage">
  <div class="owl-item">
  
  </div>
</div>

Answer 1

You can use transition instead of animation

.owl-stage {padding-top: 10px;}
.owl-item:hover {
    margin-top: -10px;
}
.owl-item {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: margin-top 0.5s ease-in-out;
}

<div class="owl-stage">
      <div class="owl-item">
      
      </div>
    </div>