<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.test{
background-image:url("man.png");
width:70px;
height:163px;
-webkit-animation-timing-function:steps(3,start);
animation-timing-function:steps(3,start);
-webkit-animation-duration:.2s;
animation-duration:.2s;
-webkit-animation-name:m1fly;
animation-name:m1fly;
-webkit-animation-delay:.5s;
animation-delay:.5s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-direction:alternate;
-webkit-animation-direction:alternate;
transform-style:preserve-3d;
}
@-webkit-keyframes m1fly {
0% {
background-position: 0 0
}
100% {
background-position: 210px 0
}
}
@keyframes m1fly {
0% {
background-position: 0 0
}
100% {
background-position: 210px 0
}
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
</html>
man.png
