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秒的动画，以便图像平滑地返回到其位置。有什么想法吗？

Answer 1

只需将transition-duration: .8s放在figure上即可。如果对元素本身应用转换，则它可以在悬停状态和悬停状态下工作。

Stack Snippet

＆＃13;

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);
}

＆＃13;

<figure></figure>

＆＃13;

你也可以改变悬停状态和悬停状态的持续时间，如

On-Hover

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

Off-Hover

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

参考链接： transition CSS

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

1 个答案: