时间戳

首页 > 解决方案 > 如何停止悬停时的快速晃动

html - 如何停止悬停时的快速晃动

问题描述

iframe {
  box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
    0 12px 30px 0 rgba(0, 0, 0, 0.377);
}
iframe:hover {
  filter: brightness(95%);
  transition:  0.5s ease-in-out;
  animation: iframes 0.8s linear both 1;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
    0 16px 35px 0 rgba(0, 0, 0, 0.493);
}
@keyframes iframes {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(0deg) ;
  }
}
 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<!-- iframe --!>

当我将鼠标悬停在这个 iframe 上时，它开始快速抖动，并且动画不止一次触发。我不知道为什么会这样。请帮我解决它。

标签： htmlcsswebiframecss-animations

解决方案

我在您的代码片段中没有体验到快速抖动的部分，重复的动画是由悬停动画引起的，这将在用户每次悬停 iframe 时重置计数。

通过在 iframe 本身上设置动画，您可以防止这种情况发生。您使用 设置在悬停时开始动画animation-play-state。

iframe {
  box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
    0 12px 30px 0 rgba(0, 0, 0, 0.377);
  animation: iframes 0.8s linear both 1;
  animation-play-state: paused;
}
iframe:hover {
  filter: brightness(95%);
  transition:  0.5s ease-in-out;
  animation-play-state: running;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
    0 16px 35px 0 rgba(0, 0, 0, 0.493);
}
@keyframes iframes {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(0deg) ;
  }
}
 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

推荐阅读