PoBNjpy

index.html

<link rel="stylesheet" href="style.css">

<meta name="author" content="José Paulo 👾 @jose.paulinhooo">

<div class="sprite knight anim-walking facing-east size-1" > </div>
<div class="sprite knight anim-walking facing-north size-2" > </div>
<div class="sprite knight anim-walking facing-west size-3" > </div>
<div class="sprite knight anim-walking facing-south size-4" > </div>

pobnjpy.markdown

PoBNjpy

A Pen by José Paulo Fernandes on CodePen.

License.

style.css

.size-1 {
    width: 100px;
    height: 100px;
}
.size-2 {
    width: 120px;
    height: 120px;
}
.size-3 {
    width: 140px;
    height: 140px;
}
.size-4 {
    width: 160px;
    height: 160px;
}
.sprite {
    --x: 1;
    --y: 1;
    background-size: calc(100%*4) calc(100%*7); /* this cuts the sheet into 4*7 sprites. */
    background-position: right calc(var(--x)*100%) bottom calc(var(--y)*100%); /* this maps a specific sprite to a dynamic (x, y) position, with (1, 1) being the upper left corner. */
    image-rendering: pixelated;
}
.knight {
    background-image: url("./knight-blue.png");
}
.anim-walking {
    animation-name: walk;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
}
.facing-south {
    --x: 1;
}
.facing-north {
    --x: 2;
}
.facing-west {
    --x: 3;
}
.facing-east {
    --x: 4;
}
@keyframes walk { /* I didn't find a generic way for incrementing the variable, but the formula is kinda intuitive. */
    0%  { --y: 1; }
    25% { --y: 2; }
    50% { --y: 3; }
    75% { --y: 4; }
    /* 100%  {--y: 1;} you may omit the last step */
}