利用css的 animation 实现
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.san{
left: 10%;
top: 20%;
-webkit-animation:dn400 3s 0s ease both;
-moz-animation:dn400 3s 0s ease both;
/*使用dn400 这个效果*/
animation:dn400 3s 0s ease both;
}
/*定制效果*/
@-webkit-keyframes dn400{0%{opacity:0;-webkit-transform:translateY(-400px);}
100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes dn400{0%{opacity:0;-moz-transform:translateY(-400px);}
100%{opacity:1;-moz-transform:translateY(0);}}
@-o-keyframes dn400{0%{opacity:0;-o-transform:translateY(-400px);}
100%{opacity:1;-o-transform:translateY(0);}}
@keyframes dn400{0%{opacity:0;transform:translateY(-400px);}
100%{opacity:1;transform:translateY(0);}}
</style>
<body>
<img src="static/images/san.png" class="san" />
<form action="">
<input type="submit" value="提交" >
</form>
</body>
</html>
原文：https://www.cnblogs.com/dongma/p/9901096.html