html2d/src/elements/hero/hero.element.css

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

:host() {
    will-change: transform;
}
.sprite {
    position: absolute; 
    pointer-events: none;
}

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

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

: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;
}

:host([attacking]) .attack-animation {
    animation-play-state: running;
    visibility: visible;
}
@keyframes framesAnimation {
    from {
        transform: translate(0px, 0)
    }
    to {
        transform: translate(-100%, 0);
    }
}