How do you dynamically add keyframes through Javascript?

So , I want to animate an Html element using a variable through keyframes , I am unable to find a way to do it through DOM.

HTML CODE

<div class="pawn" id="pawn1"></div>

CSS keyframes code

@keyframes mov_pawn_up {
    0% {
        bottom: 0%;
    }
    100% {
        bottom: 700%;
    }
}

Here , I want to be able to change the bottom property using a variable.

Thank you.