css - 输入框阴影的平滑动画

Question

我需要创建框阴影的“脉冲”动画。我知道 :after 的技巧，但它不适用于输入，因为它是自关闭元素。这是我的代码示例。如果可能的话我想用css/less来解决，尽量不要用js。我忘了补充一点，我有一些来自包的结构，我无法更改它。结构就像“表单 > div > 输入”。如果输入集中，我需要添加该动画。

.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/

提前感谢您的帮助

Answer 1

看看这对你有没有好处:

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">