Бесконечная анимация на CSS

Question

Подскажите пожалуйста как реализовать бесконечную анимацию кнопки коллбэка. есть вот такая вот кнопка. при наведении она изменяется с трубки телефона на надпись заказать звонок. нужно сделать чтобы это работало не при наведении. а просто бесконечно повторялось с определенным интервалом. в CSS анимации мало что шарю. кто может помогите плиз.

.pulse, .bloc, .phone {
 position: absolute;
 width: 90px;
 height: 90px;
 color: #fff;
 text-align: center;
 border-radius: 50%;
}
.bloc {
 cursor: pointer;
 z-index: 1;
 overflow: hidden;
        transition:.3s;
        animation:hoverWaver linear 1s infinite;
}
.pulse {
 background: #f44336;
 position: relative;
 transition: .5s;
}
.phone {
    margin-top: 19px;
 font-size: 50px;
 line-height: 94px;
 /*animation: phone .9s ease-in-out infinite;*/
 
}
.text {
 position: absolute;
 opacity: 0;
 text-transform: uppercase;
 font-weight: 700;
 top: 28px;
 font-size: 13px;
 transform: scaleX(-1);
 transition: .5s ease-in-out;
}
.phone i {
 transition: .5s ease-in-out;
}
.pulse:hover {
 background: #f44336;
 animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
.pulse:hover i {
 transition: .5s ease-in-out;
 transform: scale(0);
}
.pulse:hover .text {
 transform: scaleX(1);
 transition: .5s ease-in-out;
 opacity: 1;
}
.pulse:hover::before,
.pulse:hover::after {
 content: '';
 position: absolute;
 border: 1px solid #f44336;
 left: -20px;
 right: -20px;
 top: -20px;
 bottom: -20px;
 border-radius: 50%;
 animation: pulse 1.8s linear infinite;
 opacity: 0;
}
.pulse:hover::after {
 animation-delay: .5s;
}

@-webkit-keyframes hoverWaver {
        0% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 0 rgba(244,67,54,0.2),0 0 0 0 rgba(244,67,54,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 15px rgba(244,67,54,0.2),0 0 0 0 rgba(244,67,54,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 30px rgba(244,67,54,0),0 0 0 26.7px rgba(244,67,54,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 30px rgba(244,67,54,0),0 0 0 40px rgba(244,67,54,0.0)
}
}@keyframes hoverWaver {
        0% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 0 rgba(244,67,54,0.2),0 0 0 0 rgba(244,67,54,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 15px rgba(244,67,54,0.2),0 0 0 0 rgba(244,67,54,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 30px rgba(244,67,54,0),0 0 0 26.7px rgba(244,67,54,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(244,67,54,0.3),0 0 0 30px rgba(244,67,54,0),0 0 0 40px rgba(244,67,54,0.0)
}
}


@keyframes phone {
 0%, 100% {
  transform: rotate(-20deg);
 }
 50% {
  transform: rotate(21deg);
 }
}
@keyframes pulse {
 0% {
  transform: scale(0.5);
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  transform: scale(1.2);
  opacity: 0;
 }
}

<div class="dws">
        <div class="pulse">
            <div class="bloc"></div>
            <div class="phone"><i class="fa fa-phone" aria-hidden="true"></i></div>
            <div class="text">Заказать звонок</div>
        </div>
    </div>

БЛОГ НА HUSL

Бесконечная анимация на CSS

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