JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="bad">
        <div id="inner"></div>
    </div>
</div>

CSS

#container {
    height: 4000px;    
}

#bad {
    width: 100px;
    height: 100px;
    background-color: red;
    /*-webkit-transform: translate3d(100px, 100px, 0);*/
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: opacity 2s linear;
}

JavaScript

var bad = document.getElementById('bad');

function setOpacity(opacity) {
    bad.style.opacity = opacity;    
}

var opacity = 1;
function nextOpacity() {
    opacity = 1 - opacity;
    return opacity;
}

function setNextOpacity() {
    setOpacity(nextOpacity());
}

window.addEventListener('scroll', setNextOpacity);