Animate box-shadow

Question

I am trying to animate box-shadow on user input like the following:

@-webkit-keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    100% {
        box-shadow: 10px 10px 10px #373737;
    }
}

@keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    100% {
        box-shadow: 10px 10px 10px #373737;
    }
}

.form__element:focus {
    -webkit-animation:input-shadow ease-in-out 1s; /* Chrome, Safari, Opera */
    animation:input-shadow ease-in-out 1s;
}

I want to make it work like in bootstrap inputs, but using keyframes.

How can I do it?

Answer 1

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)