在 div:hover 之后反转动画

Question

我如何：

使 margin-top: -10px 的悬停效果在鼠标悬停在元素上时保持存在
当鼠标移出悬停位置时平滑反转动画？

谢谢帮助。

@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

您可以使用 transition 而不是 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>

在 div:hover 之后反转动画

reverse an animation after div:hover

css-animations