* {
	margin:0;
	padding:0;
}
.box {
	width:1000px;
	height:500px;
	border:1px solid #999;
	margin:0 auto;
	padding:50px;
}
.mask {
	width:200px;
	height:200px;
	position:relative;
	background:url(http://www.jq22.com/img/cs/500x500-2.png)no-repeat;
	background-size:100% 100%;
}
.mask .mask_posi {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	height:100%;
	width:0%;
	background:rgba(0,0,0,0.5);
	transition:1s;
}
.mask span {
	font-size:20px;
	font-weight:bold;
	color:#fff;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity:0;
}
.mask .icon1 {
	position:absolute;
	top:60%;
	left:30%;
	opacity:0;
}
.mask .icon2 {
	position:absolute;
	top:60%;
	left:50%;
	opacity:0;
}
.mask:hover .mask_posi {
	width:100%;
}
.mask:hover span {
	-webkit-animation:opa 1s 0.5s linear forwards;
}
.mask:hover .icon1 {
	-webkit-animation:run_top 1s 1s linear forwards;
}
.mask:hover .icon2 {
	-webkit-animation:run_top 1s 1.5s linear forwards;
}
@-webkit-keyframes opa {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}@-webkit-keyframes run_top {
	0% {
	opacity:0;
	transform:translateY(30px);
}
100% {
	opacity:1;
	transform:translateY(0px);
}
}