时间戳

首页 > 解决方案 > 当用户悬停在我网站的背景之外时，我不知道如何停止快照

html - 当用户悬停在我网站的背景之外时，我不知道如何停止快照

问题描述

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

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

标签： htmlcsscss-animations

解决方案

问题是您只是在:hover状态上设置动画，并且您希望它在元素未悬停时应用（当它显然根本没有设置任何动画时）。

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

对于这种（简单）案例（开/关动画），设置

  • 非悬停时的属性值（除非您想从默认值开始）
  • 悬停时的属性值
  • 非悬停时的过渡道具 ( -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>

推荐阅读