JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<p>
    Press the button below to make a string copy of the elements' inline style attribute, and then replace the inline style with the contents of that string.
</p>
<button id="replaceStyleAttribute">Replace the "style" attribute</button>
<p>Notice now that it's broken. Yet if you examine the HTML in webtools, the markup is identical. What magic am I missing?</p>

CSS

.test {
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    width: 50px;
    height: 50px;
    background-color: #f00;
    margin: 5px;
}

JavaScript

var i = 0;

function tick() {
    // Here is the JavaScript-based animation
    x = (Math.sin(i / 100) + 1) * 200;
    $.each($('.test'), function(i, e){
        e.style.marginLeft = x + 'px';
        e.offsetHeight;
    });
    requestAnimationFrame(tick);
    i++;

    if (i % 120 === 0) {
        $('.test').css('opacity', 1);
    } else if (i % 60 === 0) {
        $('.test').css('opacity', 0);
    }
}
requestAnimationFrame(tick);

/*
 * Set the "transition-delay" property inline
 */
var delay = 0.1;
$.each($('.test'), function (index, el) {
    $(el).css('transition-delay', delay + 's');
    $(el).css('-webkit-transition-delay', delay + 's');
    delay += 0.2;
});

/*
 * Get the inline style as a string, and replace it with
 * itself. This breaks for some reason.
 */
$('#replaceStyleAttribute').on('click', function () {
    $.each($('.test'), function (index, el) {
        var style = $(el).attr('style');
        $(el).attr('style', style);
    });
});