Эффект блеска на кнопку каждые 2 секунды?

Question

Я хочу сделать этот эффект (jsFiddle, при наведении курсора на кнопку):

Это часть кода, мне нужно, я думаю, что я хочу это: каждые две секунды на DIV с помощью этой кнопки, что и фоновое изображение:

я хочу, чтобы светить эффект как в скрипке, что будет бросаться в и быстро, через две секунды, еще один махом, и т.д. ...

возможно с css только?

если нет, с javascript, что должно быть для меня? Должен ли я сделать интервал:

setInterval(function(){ 
    document.getElementById('btnDiv').classList.add('shining'); 
    setTimeout(function(){ 
      document.getElementById('btnDiv').classList.remove('shining'); 
    ,1000) 
,2000) 

Я знаю, это немного избыточна для такого рода эффектов, не так ли?

Answer 1

Поскольку у вас уже есть свой эффект на :hover, просто преобразуйте его в animation.

#element { 
    animation: pulse 1s linear infinite alternate; 
} 

@keyframes pulse { 
    from { 
     /* define initial state of animation here */ 
    } 
    to { 
     /* define final state of animation here */ 
    } 
} 

linear infinite alternate Использование сделает импульс идти вперед и назад между двумя государствами. В зависимости от эффекта, который вы хотите достичь, вы можете получить лучшие результаты, используя что-то вроде 40% и 60% вместо from и to соответственно, чтобы добавить немного задержки вокруг импульса.

#nodelay, #delay { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #080; 
 
    border-radius: 50px; 
 
} 
 
#nodelay { 
 
    animation: pulse 2s linear infinite alternate; 
 
} 
 
#delay { 
 
    animation: pulse-delay 2s linear infinite alternate; 
 
} 
 

 
@keyframes pulse { 
 
    from {background-color: #080} 
 
    to {background-color: #0f0} 
 
} 
 
@keyframes pulse-delay { 
 
    from, 40% {background-color: #080} 
 
    60%, to {background-color: #0f0} 
 
}

<div id="nodelay"></div> 
 
<div id="delay"></div>