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

[Anonymous]

Я хочу кнопку, которая пульсирует несколько раз (три или около того), как в этой демонстрации видео. Импульсы кнопки должны иметь интервал между импульсами около 300-400 мс, а также, если эффект скручивания может быть каким-то образом достигнут, это было бы здорово. < /P>
у меня есть этот код до сих пор, но импульсная анимация не особенно близко к одному описанному и связанному выше. />

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

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