Задержка анимации CSS между повторениями

Question

У меня на сайте есть иконка телефонного звонка, и данная иконка постоянно вибрирует, и это очень мешает пользователям сайта. Я хочу седелать задержку вибрации иконки на 2 секунды. Пробовал делать вот так - animation-delay: 1s. Это не помогло мне. Задерживает только в начале. А нужен некий цикл. 2сек. вибриурет, 2сек задержка.

.call_me_pls_from_mobile {
  display: flex;
  animation: phone .1s ease-in-out infinite;
}

@keyframes phone {
 0%, 100% {
  transform: translateX(-21deg);
 }
 50% {
  transform: rotate(21deg);
 }
}

<a class="call_me_pls_from_mobile" href="">
  <img src="https://c7.hotpng.com/preview/578/746/452/5bbc65ef3eb9c-thumbnail.jpg" alt="">
</a>

Answer 1

Как вариант:

img {
  width: 100px;
  margin-top: -50px;
}

.call_me_pls_from_mobile {
  display: flex;
  transform: translateX(21deg);
  animation: phone 3.1s ease-in-out infinite;
}

@keyframes phone {
  0% {transform: rotate(-21deg);}
  1% {transform: rotate(21deg);}
  2% {transform: rotate(-21deg);}
  3% {transform: rotate(21deg);}
  4% {transform: rotate(-21deg);}
  5% {transform: rotate(-21deg);}
  6% {transform: rotate(21deg);}
  7% {transform: rotate(-21deg);}
  8% {transform: rotate(21deg);}
  9% {transform: rotate(-21deg);}
  100% {transform: rotate(-21deg);}
}

<a class="call_me_pls_from_mobile" href="">
  <img src="https://c7.hotpng.com/preview/578/746/452/5bbc65ef3eb9c-thumbnail.jpg" alt="">
</a>

Answer 2

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

a {
  display: block;
  width: 110px;
  height: 110px;
  animation: phone 2s ease-in-out infinite;
}

img {
  width: 100%;
  height: 100%;
}

@keyframes phone {
 5%, 15%, 25%, 35%, 45% {
   transform: rotate(17deg);
 }
 
 10%, 20%, 30%, 40% {
   transform: rotate(-17deg);
 }
 
 50% {
   transform: rotate(0);
 }
}

<a><img src="https://s1.iconbird.com/ico/2014/1/622/w256h2561390854463phone256.png"></a>

БЛОГ НА HUSL

Задержка анимации CSS между повторениями

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