Убрал свойства "infinite" для анимации.
Сделал 2 класса и две анимации для этих классов. Через setInterval просто меняю классы и по очереди запускаю анимации для них.
Решение конечно не совсем элегантное, но работает
<!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);
}
