html2d/src/elements/hero/hero.element.html

A Typescript game engine to build HTML5 games for the web using webcomponents.

<style>

.sprite {
    position: absolute; 
    pointer-events: none;
    transform: translate3d(0,0,0);
}

.pixel-sprite {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.idle-animation {
    animation: framesAnimation 1.1s steps(11) infinite;
    animation-play-state: paused;
    visibility: hidden;
    will-change: transform;
}

:host([idle]) .idle-animation {
    visibility: visible;
    animation-play-state: running;
}

.attack-animation {
    animation: framesAnimation 0.3s steps(3) infinite;
    animation-play-state: paused;
    visibility: hidden;
    will-change: transform;
}

:host([attacking]) .attack-animation {
    animation-play-state: running;
    visibility: visible;
}
@keyframes framesAnimation {
    from {
        transform: translate(0px, 0)
    }
    to {
        transform: translate(-100%, 0);
    }
}
</style>
<img class="sprite pixel-sprite idle-animation" draggable="false" src="./elements/hero/sprites/01-King Human/Idle (78x58).png">
<img class="sprite pixel-sprite attack-animation" draggable="false" src="./elements/hero/sprites/01-King Human/Attack (78x58).png">