当用户将鼠标悬停在我网站的背景上时，我不知道如何停止快照

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状态，并且期望它在元素没有悬停时（当它显然没有 any < / em> 动画）。

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

对于这种类型（简单）的情况（开/关动画），设置

• 不悬停时的属性值 （除非您希望从默认值开始）
• 悬停时的属性值
• 过渡道具（-timing-function，-duration，-delay，-property）非悬停状态

...足够了。如果在元素悬停时想要不同的过渡道具值，请在: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>