如何停止悬停时的快速晃动答案

【问题标题】：how to stop rapid shaking on hover如何停止悬停时的快速晃动
【发布时间】：2021-05-22 09:00:48
【问题描述】：

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

 &lt;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"&gt;&lt;/iframe&gt;

标签： html css web iframe css-animations

【解决方案1】：

我在使用您的代码 sn-p 时没有体验到快速晃动的部分，重复的动画是由悬停动画引起的，这将在每次用户悬停 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) ;
  }
}

 &lt;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"&gt;&lt;/iframe&gt;

【讨论】：

【解决方案2】：

请将“animation-iteration-count”添加到“infinite”中，以便快速摇动。

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);
animation-iteration-count:infinite;
}
@keyframes iframes {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(0deg) ;
  }
}

 &lt;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"&gt;&lt;/iframe&gt;

【讨论】：

我相信这与 OP 的要求相反，他们报告他们提供的代码反复抖动，但他们不希望这样。