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

【问题标题】：Play animation when user stop hovering over image with CSS当用户停止使用 CSS 将鼠标悬停在图像上时播放动画
【发布时间】：2018-01-18 01:06:21
【问题描述】：

我有以下 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);
}

&lt;figure&gt;&lt;/figure&gt;

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

【问题讨论】：

@keyframes example { from {background-color: red;} to {background-color: yellow;} } /* 应用动画的元素 */ div { width: 100px;高度：100px；背景颜色：红色；动画名称：示例；动画持续时间：4s； } 只是一个示例供您学习。最重要的是关键帧，确保你拥有它
将过渡放在基本状态...而不是悬停。

标签： html css css-transitions css-transforms

【解决方案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);
}

&lt;figure&gt;&lt;/figure&gt;

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

悬停

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

参考链接：transition CSS

【讨论】：