顶部div淡出

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>顶部淡出</title>
<style>
.div {
	width:300px;
	height:200px;
	margin:100px auto;
	background:url(http://www.100sucai.com/img/demo/1373.png)
}
#animation{
-webkit-animation:fadeOutUpBig 1s .2s ease both;
-moz-animation:fadeOutUpBig 1s .2s ease both;}
@-webkit-keyframes fadeOutUpBig{
0%{opacity:1;
-webkit-transform:translateY(0)}
100%{opacity:0;
-webkit-transform:translateY(-2000px)}
}
@-moz-keyframes fadeOutUpBig{
0%{opacity:1;
-moz-transform:translateY(0)}
100%{opacity:0;
-moz-transform:translateY(-2000px)}
}
</style>
</head>

<body>
<div id="animation" class="div"></div>
</body>
</html>
       

你可能感兴趣的:(javascript,css,css3)