Как устранить мерцание последнего кадра свойства animate на iphone?

Хочу сделать круг над кнопкой, который будет увеличиваться и постепенно растворятся. написал такой код:

.circle::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 6px solid #00ffcb;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

.call-oder-button:hover::after,
.call-oder-button:focus::after {
  animation: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
<div class="circle">
  ТЕСТОВАЯ КНОПКА
</div>

На последнем кадре (после того как круг исчез) на айфон он резко проявляется снова и потом анимация повторяется. Как это убрать???


Ответы (0 шт):