<html>
<style>
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.fade-in{
animation-name: fadeIn;
animation-timing-function: ease;
animation-direction: normal;
animation-play-state: running;
-webkit-animation-name: fadeIn;
-webkit-animation-timing-function: ease;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
}
.icon-arrow{
display: block;
position: absolute;
left: 50%;
40px;
height: 40px;
margin-left: -20px;
background: url("http://www.lewanau.com/public/weixin/css/img/icon-arrow.png") no-repeat left center;
-webkit-animation: arrow-ani 1s linear infinite;
-o-animation: arrow-ani 1s linear infinite;
animation: arrow-ani 1s linear infinite;
}
@-o-keyframes arrow-ani {
from{
bottom:4%;
opacity: 1;
}
to{
bottom:6%;
opacity: 0;
}
}
@-webkit-keyframes arrow-ani {
from{
bottom:4%;
opacity: 1;
}
to{
bottom:6%;
opacity: 0;
}
}
@keyframes arrow-ani {
from{
bottom:4%;
opacity: 1;
}
to{
bottom:6%;
opacity: 0;
}
}
</style>
<body style="background:#666">
<div class="animation fade-in" >
<span class="icon-arrow"></span>
</div>
</body>
</html>