Can't get dice keyframe animation to work with jQuery

I have a dice which I throw in the air and lands on a certain face when I hover over it. Here is the CSS code. It works perfectly.

 .dice_position {
    display: flex;
    height: 122px;
    width: 120px;
    margin-top: -90px;
    background-image: url("IMAGES/1-D.png");
    background-repeat: no-repeat;
}   
        
.dice_position:hover {
    animation: dice_face1 5s;
}

@keyframes dice_face1 {
    0% {transform: none; }
    2% {background-image: url("IMAGES/2-D.png"); }
    4% {background-image: url("IMAGES/4-D.png"); }
    7% {background-image: url("IMAGES/6-D.png"); }
    9% {background-image: url("IMAGES/1-D.png"); }
    12% {background-image: url("IMAGES/5-D.png"); }
    15% {background-image: url("IMAGES/2-D.png"); }
    17% {background-image: url("IMAGES/4-D.png"); }
    20% {background-image: url("IMAGES/5-D.png"); }
    23% {background-image: url("IMAGES/1-D.png"); }
    26% {background-image: url("IMAGES/3-D.png"); }
    28% {background-image: url("IMAGES/2-D.png"); }
    31% {background-image: url("IMAGES/4-D.png"); }
    33% {background-image: url("IMAGES/6-D.png"); }
    36% {background-image: url("IMAGES/3-D.png"); }
    39% {background-image: url("IMAGES/5-D.png"); }
    42% {background-image: url("IMAGES/2-D.png"); }
    45% {background-image: url("IMAGES/4-D.png"); }
    47% {background-image: url("IMAGES/1-D.png"); }
    50% {background-image: url("IMAGES/1-D.png"); }
    51% {background-image: url("IMAGES/1-D.png"); }
    53% {background-image: url("IMAGES/1-D.png"); }
    65% {transform: translate(0px, -125px) rotateY(1800deg) rotateX(2000deg); }
    100% {background-image: url("IMAGES/1-D.png"); transform: rotateY(1800deg) rotateX(2000deg); }
} 

Now, I want to recreate this animation using jQuery, so that when a player clicks a specific button, a random dice-face number is generated and the dice flips in the air and falls on the randomly chosen face. The click event works, the random number generator works, but the keyframe animation doesn't work and I have no clue as to why. Is it a syntax error? Is there something I should be including in my HTML? Help would be appreciated!! :)

Here is the jQuery code:

function rollthedice()
{
    function shake(x)
    {
        if (x == 0){
            var face = {'BackgroundImage' : 'url("1-D.png")', 'transform' : 'rotateY(1800deg) rotateX(2000deg)'};
        }
        else if ( x == 1){
            var face = {'BackgroundImage' : 'url("2-D.png")', 'transform' : 'rotateY(1800deg) rotateX(2000deg)'};
        }
        else if ( x == 2){
            var face = {'BackgroundImage' : 'url("3-D.png")', 'transform' : 'rotateY(1800deg) rotateX(2000deg)'};
        }
        else if ( x == 3){
            var face = {'BackgroundImage' : 'url("4-D.png")', 'transform' : 'rotateY(1800deg) rotateX(2000deg)'};
        }
        else if ( x == 4){
            var face = {'BackgroundImage' : 'url("5-D.png")', 'transform' : 'rotateY(1800deg) rotateX(2000deg)'};
        }
        else if ( x == 5){
            var face = {'BackgroundImage' : 'url("6-D.png")', 'transform' : 'rotateY(1800deg) rotateX(2000deg)'};
        }
        $.keyframe.define([{
                    name: 'roll',
                    '0%': {'transform': 'none'};
                    '2%': {'BackgroundImage': 'url("IMAGES/2-D.png")'},
                    '4%': {'BackgroundImage': 'url("IMAGES/4-D.png")'},
                    '7%': {'BackgroundImage': 'url("IMAGES/6-D.png")'},
                    '9%': {'BackgroundImage': 'url("IMAGES/1-D.png")'},
                    '12%': {'BackgroundImage': 'url("IMAGES/5-D.png")'},
                    '15%': {'BackgroundImage': 'url("IMAGES/2-D.png")'},
                    '17%': {'BackgroundImage': 'url("IMAGES/4-D.png")'},
                    '20%': {'BackgroundImage': 'url("IMAGES/5-D.png")'},
                    '23%': {'BackgroundImage': 'url("IMAGES/1-D.png")'},
                    '26%': {'BackgroundImage': 'url("IMAGES/3-D.png")'},
                    '28%': {'BackgroundImage': 'url("IMAGES/2-D.png")'},
                    '31%': {'BackgroundImage': 'url("IMAGES/4-D.png")'},
                    '33%': {'BackgroundImage': 'url("IMAGES/6-D.png")'},
                    '36%': {'BackgroundImage': 'url("IMAGES/3-D.png")'},
                    '39%': {'BackgroundImage': 'url("IMAGES/5-D.png")'},
                    '42%': {'BackgroundImage': 'url("IMAGES/2-D.png")'},
                    '45%': {'BackgroundImage': 'url("IMAGES/4-D.png")'},
                    '47%': {'BackgroundImage': 'url("IMAGES/1-D.png")'},
                    '50%': {'BackgroundImage': 'url("IMAGES/1-D.png")'},
                    '51%': {'BackgroundImage': 'url("IMAGES/1-D.png")'},
                    '53%': {'BackgroundImage': 'url("IMAGES/1-D.png")'},
                    '65%': {'transform': 'translate(0px, -125px) rotateY(1800deg) rotateX(2000deg)'},
                    '100%': face
        }]);
    }
    var randiceface = Math.floor(Math.random() * 6)
    shake(randiceface)
}
    
$(".button_background_roll").playKeyframe({
    name: 'name',
    duration: "3s"
}););

When using firefox devtools, here is what it says:

I am using this script tag in the of my html doc:

<script src="jquery.keyframes.js"></script>

Seems like the navigator won't accept the .playKeyframe() function because of that but not sure. Help is much needed!! Thanks in advance!