Shine effect on a button every 2 seconds? - html

Question

I want to do this effect (jsFiddle, when hover on button):
This is a part of the code i need i guess, what i want is:
every two seconds on a div with this button as the background-image:
i want the shining effect like in the fiddle, that will swoop in and out fast, after two seconds, another swoop, etc...
is it possible with css only?
if no, with javascript, what should be the case for me to do it?
Should i do an interval of:
setInterval(function(){
document.getElementById('btnDiv').classList.add('shining');
setTimeout(function(){
document.getElementById('btnDiv').classList.remove('shining');
,1000)
,2000)
I know it's a bit overkill for this kind of effects, isn't it?

Answer 1

Since you already have the effect you want on :hover, just convert it to an animation.
#element {
animation: pulse 1s linear infinite alternate;
}
#keyframes pulse {
from {
/* define initial state of animation here */
}
to {
/* define final state of animation here */
}
}
Using linear infinite alternate will make the pulse go back and forth between the two states. Depending on the effect you want to achieve, you may have better results by using something like 40% and 60% instead of from and to respectively, to add a bit of delay around the pulse.
#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>