JSFiddle - React, Tailwind, and code Playground

HTML

<div id="badstyle" class="block"></div>
<div id="hardwareaccelerated" class="block"></div>

<button id="start">Start animation</button>

CSS

.block {
    width: 50px;
    height: 50px;
    background-color: #33B5E5;
    margin-top: 10px;
}

JavaScript

$(function() {
    $('#start').on('click', function() {
        $('#badstyle').animate({'margin-left': '400px'});
      
        $('#hardwareaccelerated').animateWithCss({'transform':'translate3d(400px,0,0)'});
    });
});


(function($){
var rupper = /([A-Z])/g;
$.fn.stopCssAnimation = function(){
this.each(function(){
var $el = $(this);
var props = $el.data("cssAnimatedProps");
var cStyle = window.getComputedStyle(this, null);
var cssValues = {};
for(var prop in props){
prop = prop.replace( rupper, "-$1" ).toLowerCase();
cssValues[prop] = cStyle.getPropertyValue(prop);
}
// Remove the CSS Transition CSS
$el.css({
'-moz-transition-property': 'none',
'-moz-transition-duration': '',
'-moz-transition-timing-function': '',
'-ms-transition-property': 'none',
'-ms-transition-duration': '',
'-ms-transition-timing-function': '',
'-webkit-transition-property': 'none',
'-webkit-transition-duration': '',
'-webkit-transition-timing-function': ''
});
// Set the saved computed properties
for( var prop in cssValues ){
$el.css(prop, cssValues[prop]);
}
// Cancel any onComplete function
$el.data("cssAnimatedProps", null);
var timeoutId = $el.data("cssTimeoutId");
if( timeoutId != null ) {
clearTimeout(timeoutId);
$el.data("cssTimeoutId", null);
}
});
};
$.fn.animateWithCss = function(props, speed, easing, callback) {
var optall = jQuery.speed(speed, easing, callback);
if ( jQuery.isEmptyObject( props ) ) {
return this.each( optall.complete );
}
var easings = {
bounce: 'cubic-bezier(0.0, 0.35, .5, 1.3)',
linear: 'linear',
swing: 'ease-in-out',
};
optall.easing = optall.easing || "swing";
optall.easing = easings[optall.easing] ? easings[optall.easing] : optall.easing;
// The latest versions of Firefox do not animate from a non-explicitly set
// css properties. So for each element to be animated, go through and
// explicitly define 'em.
this.each(function(){
$(this).data("cssAnimatedProps", props);
var cStyle = window.getComputedStyle(this, null);
for(var prop in props){
prop =...