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;
    $('.test').css('margin-left', x + 'px');
    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
 */
$('.test').each(function (index, el) {
    var $this     = $(this),
        delay     = index * 0.2 + 0.1,
        tProperty = $this.css('transitionProperty'),
        tDuration = $this.css('transitionDuration'),
        tEasing   = $this.css('transitionEasing');
    
    var transition = [
        tProperty,
        tDuration,
        tEasing,
        delay + 's'
    ].join(' ');
    
    $this.css({ 
        'transition'        : transition,
        '-webkit-transition': transition 
    });
});

/*
 * 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);
    });
});