Как сделать анимацию иконки с интервалом воспроизведения?

Question

[Danya Wyse]

Вот есть иконка
https://iwyse.github.io/DashboardStringle/
Она воспроизводится без какого либо интервала, что выглядит не очень реалистично
Как прописать ей интервал между началом работы анимации?

Answer 1

[AlexGlinskiy]

Можно изменить keyframes примерно так и затем увеличить время анимации:

@keyframes callReminder {
    50% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    80% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }

    100% {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg)
    }
}

.about-reminders__remind {
    position: relative;
    color: #a2a2c2;
    font-size: 1.375rem;
    cursor: pointer;
    -webkit-animation: callReminder 1.3s infinite 5s alternate;
    animation: callReminder 1.3s infinite 5s alternate;
}

Answer 2

[Yulia Khavaeva]

https://www.youtube.com/watch?v=GKgOOuTL0po