Задать вопрос
Gavr_Gavr
@Gavr_Gavr
javascript

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

Хочу сделать круг над кнопкой, который будет увеличиваться и постепенно растворятся.
написал такой код:
<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;
   }
}


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

Вот ссылка на пример этого кода на хостинге
https://odessa.ukraine-print.com.ua/circle/index.html
  • Вопрос задан
  • 106 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
Gavr_Gavr
@Gavr_Gavr Автор вопроса
Убрал свойства "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);
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка приложения VPN
28 нояб. 2024, в 18:46
3000 руб./за проект
Разработка Телеграм Бота
28 нояб. 2024, в 17:46
10000 руб./за проект
Верстка на wordpress по макету в figma
28 нояб. 2024, в 17:38
12000 руб./за проект
Ещё заказы