<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.box1{
background: url(img/swk.png);
width: 180px;
height: 180px;
position: absolute;
right: 0px;
animation: box1 0.5s steps(7) infinite,box3 10s linear infinite;
}
@-webkit-keyframes box1{
from{
background-position: 0 0;
}
to{
background-position: -1400px 0px;
}
}
@-webkit-keyframes box3{
from{
transform: translateX(0);
}
to{
transform: translateX(-2000px);
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>