sprite.css

.sprite {
    background: url('./zombies.png');
    --sprite-width: 32px;
    --sprite-height: 48px;
    --sprite-x: 0;
    --sprite-y: 0;
    --sheet-x: 0;
    --sheet-y: 0;
    --offset-x: calc((var(--sheet-x) * var(--sprite-width) * 3));
    --offset-y: calc((var(--sheet-y) * var(--sprite-height) * 4));
    background-position-x: calc((var(--sprite-x) * var(--sprite-width) + var(--offset-x)) * -1);
    background-position-y: calc((var(--sprite-y) * var(--sprite-height) + var(--offset-y)) * -1);
    display: block;
    width: var(--sprite-width);
    height: var(--sprite-height);
    border: 1px solid var(--color);
    animation: 1s sprite-walk infinite;
}
@keyframes sprite-walk {
    0%,32% {
        --sprite-x: 0;
    }
    33%,64% {
        --sprite-x: 1;
    }
    65%,100% {
        --sprite-x: 2;
    }
}
.sprite.left {
    --sprite-y: 1;
}
.sprite.right {
    --sprite-y: 2;
}
.sprite.up {
    --sprite-y: 3;
}
.sprite.foo {
    --sheet-x: 1;
}
.sprite.bar {
    --sheet-y: 1;
}