(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); })();
<div id="test" class="some-control"></div>
@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; }