document.body.onkeydown = handleKeyDown;

const card = document.getElementById('card');
let direction;


function handleKeyDown(e) {
    if(e.key === "ArrowRight") handleNext();
    if(e.key === "ArrowLeft") handlePrevious();
}

function handleNext() {
    direction = "next"
    
    // If I click arrow next/previous before previous transition is finished I want to start from the beginning
    
    /* NOT WORKING */
    
    disableTransition(); // Here I want to disable previously transition that is in proccess (probably)
    removeTransform(); // Remove translateX -2rem or 2rem, be ready from 0px everytime
    
    /* END NOT WORKING */
    
    handleMoving(); // Prepared from start, handle moving again
}

function handlePrevious() {
    direction = "previous"
    
    disableTransition();
    removeTransform();
    
    handleMoving();
}

function handleMoving() {
    enableTransition();
    addTransform();
}

function enableTransition() {
    card.style.transition = "transform .5s ease-in-out";
}

function disableTransition() {
    card.style.transition = "";
}

function addTransform() {
    card.style.transform = (direction === 'previous') ? "translate3d(-2rem, 0, 0)" : "translate3d(2rem, 0, 0)";
    card.addEventListener('transitionend', removeTransform, {once: true});
}

function removeTransform() {
    card.style.transform = "";
}

.card {
  position: absolute;
  inset: 0;
  border: 2px solid black;
}

.card-wrapper {
  position: relative;
  width: 300px;
  height: 150px;
  background: lightgray;
  margin: auto;
}

<div class="card-wrapper">
  <div id="card" class="card"></div>
</div>