JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<script src="https://rawgit.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.js"></script>
<h1>Boing</h1>
<p>Switching animation keyframes in media queries!</p>

JavaScript

$.keyframe.define([{
    name: "bounce",
    media: "screen and (min-width:701px)",
    from: { transform: "translateX(50%)" },
    to: { transform: "translateX(-50%)" }
},{
    name: "bounce",
    media: "screen and (max-width:700px)",
    from: { transform: "translateX(-10%)" },
    to: { transform: "translateX(10%)" }
}]);

$('h1').playKeyframe('bounce .5s alternate infinite ease-in');