<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background: #639;
235px;
height: 216px;
position: absolute;
top: 300px;
left: 300px;
}
/*nimation-delay:1s*/
@keyframes arrow1{
0%{transform: translateY(0);}
100%{transform: translateY(10px);}
}
@-webkit-keyframes arrow1{
0%{-webkit-transform: translateY(0);}
100%{-webkit-transform: translateY(10px);}
}
.arrow{
animation: arrow1 2s infinite;
-webkit-animation: arrow1 2s infinite;
animation-timing-function:ease-in-out;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction:alternate;
animation-direction:alternate;
}
</style>
</head>
<body>
<div class="arrow">
<img src="http://paas.mail.10086.cn/res/build/images/c04.png" />
</div>
</body>
</html>
链接