CSS实现div淡入淡出

#info{
	display: none;
	top: 10%;
	left: 32%;
	width: 55%;
	height: 65%;
	background-color: white;
	z-index: 1002;
	overflow: auto;
	animation: anim 2s;
}
@keyframes anim { 
	0% {opacity: 0;}
	100%{opacity:1;
}
}

js

<script type="text/javascript">
	function run() {
		document.getElementById('info').style.display = 'block';
	}
</script>

jsp

<div>
	<a href="javascript:void(0)" onclick="run()">个人信息</a>
</div>
<div id="info">div淡入</div>