css3光影闪过效果

<div class="lightbox">
	<div class="guangshu"></div>
</div>

.lightbox{	
	width:7rem;height:7rem;overflow:hidden;	
}

/* 光影划过效果 */
.guangshu {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.guangshu:before {
	content:"";
	position: absolute;
	width:2.5rem;
	height:100%;
	top:0;
	left:-50%;
	overflow: hidden;
	background: -moz-linear-gradient(left,
		rgba(255, 255, 255, 0)25%,
		rgba(255, 255, 255, .2)50%,
		rgba(255, 255, 255, 0)75%);
	background: -webkit-gradient(linear, left top, right top,
		color-stop(25%, rgba(255, 255, 255, 0)),
		color-stop(50%, rgba(255, 255, 255, .2)),
		color-stop(75%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(left,
		rgba(255, 255, 255, 0)25%, 
		rgba(255, 255, 255, .2)50%, 
		rgba(255, 255, 255, 0)75%);
	background: -o-linear-gradient(left, 
		rgba(255, 255, 255, 0)25%, 
		rgba(255, 255, 255, .2)50%, 
		rgba(255, 255, 255, 0)75%);
	
	transform: skewX(-45deg);
	-webkit-transform: skewX(-45deg);
	-moz-transform: skewX(-45deg)
	
	animation:tolight 1.5s infinite  linear;
	-webkit-animation:tolight 1.5s infinite  linear;

}

/*光影划过动画*/
@keyframes tolight
{
	from {left:-50%;}
	to {left:100%;}
}
@-webkit-keyframes tolight
{
	from {left:-50%;}
	to {left:100%;}
}