JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>

<div id="update-box">Run Another Animation</div>

CSS

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}
@keyframes rotate {
    0% {-moz-transform: rotate(-10deg);}
    100% {-moz-transform: rotate(-10deg);}
}
body { text-align: center; }
#box {
        height: 100px;
        width: 100px;
        background-color: blue;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        animation-duration: 1s;
        animation-timing-function: linear;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: linear;
        margin: 30px auto;
}

#update-box {
    border: 3px solid black;
    background: #efefef;
    font-weight: bold;
    cursor: pointer;   
    padding: 10px;
    margin: 30px auto;
    display: inline-block;
}
#update-box:hover {
    background: black;
    color: white;
}

JavaScript

// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule)
    {
        // gather all stylesheets into an array
        var ss = document.styleSheets;
        
        // loop through the stylesheets
        for (var i = 0; i < ss.length; ++i) {
            
            // loop through all the rules
            for (var j = 0; j < ss[i].cssRules.length; ++j) {
                // find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
                if (( ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE) && ss[i].cssRules[j].name == rule)
                    return [ss[i], ss[i].cssRules[j]];
            }
        }
        
        // rule not found
        return null;
    }

// remove old keyframes and add new ones
function change(anim)
    {
        // find our -webkit-keyframe rule
        var results = findKeyframesRule(anim);
        var style_sheet = results[0];
        var rule = results[1];
        console.log(rule)
        // remove the existing 0% and 100% rules
        rule.deleteRule("0%");
        rule.deleteRule("100%");
        rule.appendRule("0% { transform: rotate(0deg);}")
        rule.appendRule("100% { transform: rotate("+randomFromTo(-360,360)+"deg); }")
        
        // create new 0% and 100% rules with random numbers
        var box = document.getElementById('box');
        // assign the animation to our element (which will cause the animation to run)
        box.style.animationName = 'none';
        box.offsetWidth = box.offsetWidth;
        box.style.animationName = anim;
    }

// begin the new animation process
function startChange()
    {
        // remove the old animation from our object
        document.getElementById('box').style.animationName = "none";
        
        // call the change method, which will update the keyframe animation
        setTimeout(function(){change("rotate"); $('#update-box').bind('click', click_handler);   }, 0);
   ...