当用户停止使用 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 秒的动画，以便图像顺利返回其位置。有什么想法吗？

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 */
}

参考链接：过渡 CSS