How to Reverse an Animation on Mouse Out After Hover

div {  -webkit-animation-fill-mode: forwards;  animation-duration: 2s;  animation-name: a;  background-color: #a00;  display: inline-block;  padding: 50px;}
div:hover {  -webkit-animation-fill-mode: forwards;  animation-duration: 2s;  animation-name: ra;}
@keyframes a {  0% {    padding: 50px;  }  100% {    padding: 100px 200px;  }}
@keyframes ra{    0% {       padding: 100px 200px;  }  100% {  padding: 50px; }}

<div></div>

reverse an animation after div:hover

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>