JSFiddle - React, Tailwind, and code Playground

by IanY

HTML

<p>Lorem ipsum dolor sit amet.</p>

CSS

@-webkit-keyframes nodeInserted {
    50% { opacity: 0.99 }
}
@-moz-keyframes    nodeInserted {
    50% { opacity: 0.99 }
}
@-ms-keyframes     nodeInserted {
    50% { opacity: 0.99 }
}
@-o-keyframes      nodeInserted {
    50% { opacity: 0.99 }
}
@keyframes         nodeInserted {
    50% { opacity: 0.99 }
}

body {
    -webkit-animation-duration: 1ms;
       -moz-animation-duration: 1ms;
        -ms-animation-duration: 1ms;
         -o-animation-duration: 1ms;
            animation-duration: 1ms;
    -webkit-animation-name: nodeInserted;
       -moz-animation-name: nodeInserted;
        -ms-animation-name: nodeInserted;        
         -o-animation-name: nodeInserted;
            animation-name: nodeInserted;
    }

JavaScript

function insertListener(event) {
    if (event.animationName == 'nodeInserted') {
        // DOM manipulation start
        document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
        // DOM manipulation end
    }
}

document.addEventListener('webkitAnimationStart', insertListener);
document.addEventListener(    'MSAnimationStart', insertListener);
document.addEventListener(     'OAnimationStart', insertListener);
document.addEventListener(      'animationstart', insertListener);