How to eliminate last frame flickering of animate property on iphone?

G

GAS-ART2021-06-27 16:26:19

css

GAS-ART, 2021-06-27 16:26:19

I want to make a circle above the button, which will increase and gradually dissolve.
wrote this code:

<div class="circle">
      ТЕСТОВАЯ КНОПКА
   </div>

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

On the last frame (after the circle has disappeared) on the iPhone, it sharply reappears and then the animation repeats. How to remove it???

Here is a link to an example of this code on hosting
https://odessa.ukraine-print.com.ua/circle/index.html

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

G

GAS-ART, 2021-06-28
@Gavr_Gavr

Removed "infinite" properties for animation.
Made 2 classes and two animations for these classes. Through setInterval, I simply change classes and start animations for them one by one.
The solution is not very elegant, but it works.

<!DOCTYPE html>
<body>
   <div class="circle">
      ТЕСТОВАЯ КНОПКА
   </div>
</body>
</html>

body {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.circle.animate::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;
}

.circle.active::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: ringActive 1.5s;
}
.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;
   }
}
@keyframes ringActive {
   0% {
      width: 30px;
      height: 30px;
      opacity: 1;
   }
   100% {
      width: 300px;
      height: 300px;
      opacity: 0;
   }
}

window.onload = function () {
   let circle = document.querySelector('.circle');

   circle.classList.add('animate');

   setInterval(() => {
      if (circle.classList.contains('animate')) {
         circle.classList.remove('animate');
         circle.classList.add('active');
      } else {
         circle.classList.remove('active');
         circle.classList.add('animate');
      }
   }, 1500);
}