DOM insertion detecting with CSS animation

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <h1>DOM insertion detecting</h1>
      <div class="row">
        <!-- buttons -->
        <div class="col-sm-6">
          Add target <code>div</code>s:
          <button class="btn btn-default js-add-dom" data-dom-count="1">1</button>
          <button class="btn btn-default js-add-dom" data-dom-count="5">5</button>
          <button class="btn btn-default js-add-dom" data-dom-count="10">10</button>
        </div>
        <div class="col-sm-6">
          Add non-target <code>div</code>s:
          <button class="btn btn-default js-add-dom" data-dom-count="1" data-class="lol">1</button>
          <button class="btn btn-default js-add-dom" data-dom-count="5" data-class="lol">5</button>
          <button class="btn btn-default js-add-dom" data-dom-count="10" data-class="lol">10</button>
        </div>
        
        <!-- log -->
        <div class="col-sm-12">
          <h4>Logs</h4>
          <pre class="log js-log"></pre>
        </div>
      </div>
      <hr>
      <!-- watches -->
      <div class="row js-doms-container">
      </div>
    </div>
  </body>

</html>

// Code goes here

document.addEventListener('animationstart', onAnimationStart, true);
document.addEventListener('webkitAnimationStart', onAnimationStart, true);

document.addEventListener('animationend', onAnimationEnd, true);
document.addEventListener('webkitAnimationEnd', onAnimationEnd, true);

function onAnimationStart (evt) {
  log(evt.target.id, 'start', evt.animationName);
}
function onAnimationEnd (evt) {
  log(evt.target.id, 'end', evt.animationName);
}

function log () {
  var args = Array.prototype.slice.call(arguments),
      toAdd = $.map(args, function (v) { 
        var json = '[object Object]';
        
        try {
          json = JSON.stringify(v);
        } catch(e) {}
        
        return json;
      }).join(', ');
  
  var $log = $('.js-log');
  
  $log.prepend($('<div>' + toAdd + '</div>'));
}

$(function () {
  var uniqId = 0;
  
  var $domsContainer = $('.js-doms-container');
  
  $('.js-add-dom').on('click', function () {
    var $this = $(this),
        data = $this.data(),
        i, $dom;
    
    for (i = 0; i < data.domCount; i++) {
      ++uniqId;
      $dom = $('<div />', {id: 'obj-' + uniqId})
        .addClass('col-xs-1')
        .addClass(data.class || 'dom')
        .text(uniqId);
      $domsContainer.append($dom);
    }
  });
});

/* Styles go here */

@-webkit-keyframes pymaster-detect-dom-insertion { from {opacity: 0.99;} to {opacity: 1;} }
@keyframes         pymaster-detect-dom-insertion { from {opacity: 0.99;} to {opacity: 1;} }
div.dom {
  -webkit-animation-delay: 0s !important;
  -webkit-animation-name: pymaster-detect-dom-insertion !important;
  -webkit-animation-duration: 1ms !important;
  -webkit-animation-play-state: running !important;
  animation-delay: 0s !important;
  animation-name: pymaster-detect-dom-insertion !important;
  animation-duration: 1ms !important;
  animation-play-state: running !important;
}

.log {
  max-height: 150px;
}
.log div {
  padding: 3px 0;
  border-bottom: 1px dashed rgb(213, 213, 213);
}

.js-doms-container div {
  height: 30px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
  text-align: center;
  color: #7A7A7A;
  line-height: 30px;
}
.dom {
  background-color: #C2EBD4;
}
.lol {
  background-color: #FFC9C9;
}