JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/heygrady/transform/jquery.transform-0.9.3.min.js"></script>
<div id="box">
<h1>Animated Skew In jQuery Transform</h1>
<p class="button"><a onclick="skew()">Skew Now (works fine)</a></p>
<p class="button"><a onclick="animateSkew()">Animated Skew (broken)</a></p>
</div>

CSS

#box {
    position: absolute;
    left: 2em;
    top: 2em;
    padding: 4em 2em;
    background: #def;
    border: 1px solid #8ab;
}

p.button {
    margin-top: 1em;
    text-align: center;
}

a {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

JavaScript

var skewed = false;
function skew() {
    skewed = !skewed;        
    $('#box').css({
        skewY: skewed ? '10deg' : '-10deg'
    });
}

function animateSkew() {
    skewed = !skewed;
    $('#box').animate({
        skewY: skewed ? '10deg' : '-10deg'
    })
}