CSS Hover TranslateY 与 Fluid Motion 而不是立即重置？ [复制]

Posted 2023-03-06

【中文标题】CSS Hover TranslateY 与 Fluid Motion 而不是立即重置？ [复制]

【英文标题】：CSS Hover TranslateY with Fluid Motion instead of reseting instantly? [duplicate]

【发布时间】：2021-01-09 04:40:03

【问题描述】：

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

这可能与 CSS 相关吗？还是这个人使用了动画库和效果？

这是我的 CSS 让卡片向上悬停。

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

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

【参考方案1】：

要使过渡同时适用于悬停和非悬停，您需要在正常状态下定义transition：

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


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

【讨论】：

啊，谢谢它的工作！