JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" class="some-control"></div>

CSS

@keyframes nodeInserted {  
    from {  
        clip: rect(1px, auto, auto, auto);  
    }
    to {  
        clip: rect(0px, auto, auto, auto);
    }  
}

@-moz-keyframes nodeInserted {  
    from {  
        clip: rect(1px, auto, auto, auto);  
    }
    to {  
        clip: rect(0px, auto, auto, auto);
    }  
}

@-webkit-keyframes nodeInserted {  
    from {  
        clip: rect(1px, auto, auto, auto);  
    }
    to {  
        clip: rect(0px, auto, auto, auto);
    }  
}

@-ms-keyframes nodeInserted {  
    from {  
        clip: rect(1px, auto, auto, auto);  
    }
    to {  
        clip: rect(0px, auto, auto, auto);
    }  
}

@-o-keyframes nodeInserted {  
    from {  
        clip: rect(1px, auto, auto, auto);  
    }
    to {  
        clip: rect(0px, auto, auto, auto);
    }  
} 

div.some-control {
    padding: 50px;
    background: #FF6A6A;
    animation-duration: 0.001s;
    -o-animation-duration: 0.001s;
    -ms-animation-duration: 0.001s;
    -moz-animation-duration: 0.001s;
    -webkit-animation-duration: 0.001s;
    animation-name: nodeInserted;
    -o-animation-name: nodeInserted;
    -ms-animation-name: nodeInserted;        
    -moz-animation-name: nodeInserted;
    -webkit-animation-name: nodeInserted;
}

div.some-control div.some-control {
    background: #87CEFF;
}

JavaScript

(function(){

var count = 1,
    event = function(event){
        if (event.animationName == 'nodeInserted') event.target.textContent = 'Element ' + count++ + ' has been parsed!';
    }
        
document.addEventListener('animationstart', event, false);
document.addEventListener('MSAnimationStart', event, false);
document.addEventListener('webkitAnimationStart', event, false);

setTimeout(function(){
    var div = document.createElement('div');
    div.addClass('some-control');
    document.getElementById('test').appendChild(div)
}, 2000);

})();