JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
@keyframes slide{
    from { 
    background-color: red;
    }
    to {
        background-color: rgba(0,255,0,.01);
    }
}
#box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: slide;
    animation-duration: 10s;
    animation-timing-function: linear;
}

@keyframes rotate{
    from { 
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

#rotate:hover {
    transition-duration: 2s;
    transition-property: all;
    
    transform: rotate(-360deg);
}

#rotate {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
}


</style>
<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
window.setTimeout(function(){
    $("#box").get(0).style.webkitAnimationPlayState = 'paused';
}, 5000);
</script>
<body>
<div id="box"></div>
<div id="rotate"></div>
</body>
</html>