Smooth animation of box shadows in input

Question

i need to create "pulse" animation of box shadow. I know trick with :after, but it not works with input because it's self closing element. Here's example of my code. If possible I would like to solve it in css/less and try to not use js. I forgot to add that i have some structure from package and I can't change it. Structure is like "form > div > input". And i need to add that animation if input is focused.

.elem {
  border: 2px solid black;
  width: 150px;
  height: 50px;
  margin: 30px;
  line-heiht: 50px;
  font-size: 42px;
}

@keyframes pulseGreenShadow {
  from {
    box-shadow: 3px 3px 5px green
  }
  to {
    box-shadow: 1px 1px 0px green
  }
}

.elem:focus {
  animation: pulseGreenShadow 1s ease-in-out infinite alternate-reverse;
}

<input class="elem">

http://jsfiddle.net/SkylinR/cowzb1hg/227/

Than you in advance for any help

Answer 1

See if this is any better for you:

input {
	border: 1px solid lightgray;
	height: 40px;
	padding: 0 10px;
	width: 200px;
}

input:focus {
	animation: glow 800ms ease-out infinite alternate;
	outline: none;
}


@keyframes glow {
    0% {
		box-shadow: 0 0 5px rgba(0,255,0,.2);
    }	
    100% {
		box-shadow: 0 0 20px rgba(0,255,0,.8);
    }
}

<input type="text">