css3鼠标悬停图片渐显飞入效果

body程序：

<div id="bei">
<div id="img"><img  src="xianzi.png" /></div>
</div>

　　

css样式：

#bei{
	width:324px;
	height:220px;
	background-image: url(ddaf.jpg);
	cursor:pointer;
	background-repeat: no-repeat;
	}
#img{ position:relative; left:-150px; top:-140px; opacity:0;  }

#bei:hover #img{  animation:myfirst 1.5s ; animation-fill-mode:forwards }
@keyframes myfirst{
	from{ position:relative; left:-150px; top:-140px; opacity:0;}
	to{ position:relative; left:100px; top:0px; opacity:1;}
	}

其中　　

 animation-fill-mode:forwards的意思是将动画定格在最后一帧
利用了css3的 动画和过度效果