javascript - 悬停离开动画

Question

当我们在一个元素上应用悬停效果时(例如当悬停在 div 上时会有一个盒子阴影)，过渡时间为 1 秒。 它在悬停时会产生动画，但是一旦您将鼠标移开，它就没有过渡，它只是急剧返回到状态。

当我们离开悬停状态时，如何提供大约 1 秒的过渡？

我看到了一些代码，但看不出是什么导致了这种情况。

div {
  width: 50px;
  height: 50px;
  background: purple;
}

div:hover {
  animation: nav 1s linear forwards;
}
@keyframes nav {
  to {
    box-shadow: 5px 5px 2px black;
  }
}

<div></div>

Answer 1

你不应该做任何事情。当您停止悬停时，它将转换回来。

div {
  width: 50px;
  height: 50px;
  background: purple;
  transition: box-shadow 1s;
}

div:hover {
   box-shadow: 5px 5px 2px black;
}

<div></div>