Попытка реализовать анимацию листа спрайтов через css. Я последовал этому примеру
https://codepen.io/SitePoint/pen/zxXrzP
Однако моя анимация скользит вертикально, и я не могу понять почему. Любой вклад приветствуется.
.parent {
position: relative;
width: 70%;
margin: -10% auto 0 auto; /* positioning tweak */
}
.parent:before {
content: "";
display: block;
padding-top: 61.37%;
}
.ryu {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("http://dev.froststudio.se/wp-content/uploads/2020/06/frostcell_v03.png");
background-size: 100%;
animation: sprite 4s steps(79) forwards;
}
@keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
http://dev.froststudio.se
Ура,