Question

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 上时，它开始快速摇晃并且动画不止一次触发。我不知道为什么会这样。请帮我解决它。

Answer 1

我在您的代码片段中没有遇到快速抖动的部分，重复动画是由悬停动画引起的，每次用户悬停 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>

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

 <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>

如何在悬停时停止快速晃动

2 个答案: