const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");

playerHand.style.animation = "shakePlayer 1.5s ease";
computerHand.style.animation = "shakeComputer 1.5s ease";

@keyframes shakeComputer{
    0%{
        transform: translateY(0px);
    }
    15%{
        transform: translateY(-50px);
    }
    30%{
        transform: translateY(0px);
    }
    45%{
        transform: translateY(-50px);
    }
    60%{
        transform: translateY(0px);
    }
    75%{
        transform: translateY(-50px);
    }
    100%{
        transform: translateY(0px);
    }
    85%{
        transform: translateY(-50px);
    }
}

@keyframes shakePlayer {
    0%{
        transform: rotateY(180deg) translateY(0px);
    }
    15%{
        transform: rotateY(180deg) translateY(-50px);
    }
    30%{
        transform: rotateY(180deg) translateY(0px);
    }
    45%{
        transform: rotateY(180deg) translateY(-50px);
    }
    60%{
        transform: rotateY(180deg) translateY(0px);
    }
    75%{
        transform: rotateY(180deg) translateY(-50px);
    }
    100%{
        transform: rotateY(180deg) translateY(0px);
    }
    85%{
        transform: rotateY(180deg) translateY(-50px);
    }
}

div {
    width: 200px;
    height: 200px;
    display: inline-block;
    border: 1px solid red;
}

.player-hand::before { content: ".player-hand" }
.computer-hand::before { content: ".computer-hand" }

<div class="player-hand"></div>
<div class="computer-hand"></div>