html - 当用户悬停在我网站的背景之外时，我无法弄清楚如何停止快速返回

Question

我有动画的关键帧，但我尝试在正常状态下添加过渡、变换和动画来缓和动画，但没有任何效果。这是悬停动画的代码。

  .shadow-pop-bl:hover {
  -webkit-animation: shadow-pop-bl 0.3s cubic-bezier(0.470, 0.000, 
  0.745, 0.715) both;
  animation: shadow-pop-bl 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) 
  both;
  }

  @keyframes shadow-pop-bl {
  0% {
  box-shadow: 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0 
  #c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
  }
  100% {
  box-shadow: -1px 1px #c4c8d4, -2px 2px #c4c8d4, -3px 3px #c4c8d4, -4px 
  4px #c4c8d4, -5px 5px #c4c8d4, -6px 6px #c4c8d4, -7px 7px #c4c8d4, 
  -8px 8px #c4c8d4;
  -webkit-transform: translateX(8px) translateY(-8px); transform: 
  translateX(8px) translateY(-8px);
  }
  }

Answer 1

问题是你只是在 :hover 状态下设置动画，你期望它在元素没有悬停时应用(当它显然没有 < em>任何 动画集)。

解决它的一种方法是在非悬停元素上定义动画并在悬停时更改它。但这对你的情况来说太过分了。

对于这种(简单的)案例(开/关动画)，设置

• 非悬停时的属性值(除非您想从默认值开始)
• 属性值悬停
• transition props (-timing-function, -duration, -delay, -property) 非悬停

……够了。如果你想在元素悬停时为过渡 Prop 设置不同的值，请在 :hover 规则中指定它们，将它们放在普通元素上的规则之后。

总之，对于您的情况，这就足够了:

.shadow-pop-bl {
  transition: box-shadow .42s cubic-bezier(.5,0,.3,1);
}

.shadow-pop-bl:hover {
  box-shadow: 1px 1px #c4c8d4, 2px 2px #c4c8d4, 3px 3px #c4c8d4, 4px 4px #c4c8d4, 
  5px 5px #c4c8d4, 6px 6px #c4c8d4, 7px 7px #c4c8d4, 8px 8px #c0c4d0;
} 

注意:我删除了 translate 不仅是为了简化示例，而且因为在悬停时更改元素的位置被认为是糟糕的 UI(将元素悬停在某个区域叶子会在悬停/非悬停之间闪烁)。

.shadow-pop-bl {
  transition: box-shadow .42s cubic-bezier(.5,0,.3,1);
}

.shadow-pop-bl:hover {
  box-shadow: 
  1px 1px #c4c8d4, 2px 2px #c4c8d4, 3px 3px #c4c8d4, 4px 4px #c4c8d4, 
  5px 5px #c4c8d4, 6px 6px #c4c8d4, 7px 7px #c4c8d4, 8px 8px #c4c8d4, 
  9px 9px #c4c8d4, 10px 10px #c4c8d4, 11px 11px #c4c8d4, 12px 12px #c4c8d4, 
  13px 13px #c4c8d4, 14px 14px #c4c8d4, 15px 15px #c4c8d4, 16px 16px #c4c8d4, 
  17px 17px #c4c8d4, 18px 18px #c4c8d4, 19px 19px #c4c8d4, 20px 20px #c0c4d0;
} 

/* rest is irrelevant */
.shadow-pop-bl {
  background-color: white;
  padding: 2rem;
  border: 1px solid #fcfcfc;
  cursor: pointer;
  max-width: 240px;
  text-align: center;
  margin: 0 auto;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body, html {
  height: 100%;
}

<div class="shadow-pop-bl">Lorem ipsum dolor sit amet<br>Lorem ipsum dolor sit amet<br></div>