当用户停止将鼠标悬停在图像上时播放动画 CSS

Question

我有以下 css 代码，我用在一些图像上，这些图像在我的网站上充当按钮：

figure {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

figure:hover {
  cursor: pointer;
  transform: translateY(-10px);
  transition-duration: .8s;
  box-shadow: 5px 15px 0px 0 rgba(0,0,0,.2);
}

<figure></figure>

效果很好，但是当用户停止悬停时，图像会回到其初始位置（撤消变换 translateY）并且看起来不太好。我想在用户停止悬停时添加一个持续时间为 0.8 秒的动画，以便图像 returns 顺利到位。有什么想法吗？

Answer 1

只需将 transition-duration: .8s 放在 figure 上。如果您在元素本身上应用过渡，它适用于悬停状态和悬停状态。

堆栈片段

figure {
  width: 100px;
  height: 100px;
  border: 1px solid;
  transition-duration: .8s;
}

figure:hover {
  cursor: pointer;
  transform: translateY(-10px);
  box-shadow: 5px 15px 0px 0 rgba(0,0,0,.2);
}

<figure></figure>

您还可以更改悬停状态和悬停状态的持续时间，例如

悬停

figure:hover {
  transition-duration: .8s;  /* It will run when you hover on your element */
}

悬停

figure {
  transition-duration: .4s;  /* It will run when you move cursor from your element */
}

Reference Link: transition CSS

当用户停止将鼠标悬停在图像上时播放动画 CSS

Play animation when user stop hovering over image with CSS

html

css

css-transitions

css-transforms