Html
<html>
<head>
<!-- заголовок -->
<meta charset="utf-8">
<title>Animation hero</title>
<!-- CSS стили -->
<style>
.hero {
display: block;
width: 40px;
height: 40px;
background-image: url(./images/hero.png);
background-position: left 0;
animation: animation-hero 1s steps(12) infinite;
}
@keyframes animation-hero{
0%{background-position:0 top}
to{background-position:-480px top}
}
</style>
</head>
<!-- body -->
<body>
<div class="hero"></div>
</body>
</html>