Как создать кнопку с несколькими импульсными эффектами ⇐ CSS

[Anonymous]

Итак, я хочу кнопку, которая пульс с несколькими импульсами, например, 3, но они должны иметь интервал между ними 300-400 мс, а также если этот эффект скручивания может быть как-то отличным < /p>
Пример разыскиваемого эффекта < /p>
< /p>, но я действительно далеко от истины. Class = "Snippet-Code">

Код: Выделить всё

body {
background: black;
}

.button {
padding: 0.75em 1.5em;
border: 3px solid white;
border-radius: 15px;
}

.button:hover {
animation: pulse 4s infinite;
transition: 1s ease all;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7),
0 0 0 0 rgba(255, 255, 255, 0.5), 0 0 0 0 rgba(255, 255, 255, 0.3);
}

50% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0),
0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
}

100% {
box-shadow: 0 0 0 30px rgba(255, 255, 255, 0),
0 0 0 40px rgba(255, 255, 255, 0), 0 0 0 50px rgba(255, 255, 255, 0);
}
}< /code>
Button

Можете ли вы дать мне несколько рекомендаций, как это можно сделать?

Подробнее здесь: https://stackoverflow.com/questions/794 ... se-effects