how to stop rapid shaking on hover

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

when I hover on this iframe it starts to shaking rapidly and the animation trigger more than once. I don't know why this happens . pls help me to solve it.