Make it loop to infinite
and reset the status to initial state at 100%
in your @keyframes
animation.
@-webkit-keyframes input-shadow {
0% {
box-shadow: none;
}
50% {
box-shadow: 10px 10px 10px #373737;
}
100% {
box-shadow: none;
}
}
@keyframes input-shadow {
0% {
box-shadow: none;
}
50% {
box-shadow: 10px 10px 10px #373737;
}
100% {
box-shadow: none;
}
}
.form__element:focus {
-webkit-animation:input-shadow ease-in-out 1s infinite;
animation:input-shadow ease-in-out 1s infinite;
}
Sample: http://jsfiddle.net/easwee/R2F4W/ (removed :focus to trigger without clicking)