CSS悬停在TranslateY上的流体运动而不是立即重置？

Question

所以我看到这个网站有一个悬停效果，除了当你把鼠标移开时，卡片会以流畅的运动回到原来的位置，而不是立即重置为0。

仅仅使用CSS就可以做到吗？或者这个人使用了动画库和特效？

下面是我的CSS，它可以让卡片向上悬停。

.card__container:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease-in-out;
}

问题是，当我移走我的鼠标时，它会立即回到原来的位置，但我想让它在一个动作中流畅地返回。如果我在移除鼠标时将其设置为像translateY(-100px)一样，它会立即重置回0位置，但我希望它慢慢地回到它的位置。这是一个夸张的例子，但这就是我试图复制的效果

Answer 1

要使转换同时适用于悬停和非悬停，您需要将transition定义为正常状态：

.card__container {
  /* define the transition here */
  transition: all 0.3s ease-in-out;
}

.card__container:hover {
  transform: translateY(-5px);
}