Cannot interact with transitioning elements

http://stackoverflow.com/questions/19629311/cannot-interact-with-transitioning-html-elements

HTML

<div id="wrapper">
    <div id="container"></div>
</div>

CSS

html, body, #wrapper {
    height: 100%;
    padding: 0;
    margin: 0;
    color: #56F8F9;
    text-align: center;
}
#wrapper {
    position: relative;
}
#container, .transition {
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}
#container {
    bottom: 0%;
    width: 100%;
    background: black;
}
.transition {
    border-radius: 50%;
    background: lightblue;
    border: 10px solid;
    transition:all 2s linear;
}

JavaScript

var onSelect = ("ontouchstart" in document.documentElement) ? "touchstart" : "mousedown";
var container = document.getElementById("container");
container.addEventListener(onSelect, function () {
    if (event.target.classList.contains("transition")) {
        var tDiv = event.target;
        var box = tDiv.getBoundingClientRect();
        var durationEase = "0.25s linear";
        tDiv.style.pointerEvents = "none";
        //tDiv.style.webkitTransform = "translate3d(" + box.left + "px," + box.top + "px, 1px)";
        tDiv.style.opacity = 0;
        //tDiv.style.webkitTransition = "all " + durationEase;
    }
    event.preventDefault();
    event.stopPropagation();
}, false);

for (var i = 0; i < 30; i++) {
    window.setTimeout(function () {
        createDiv();
    }, i * 3000);
}

function createDiv() {
    var tDiv;
    var transitionDivSize = Math.min(window.innerHeight, window.innerWidth) * Math.random() * 0.1 + 12;

    tDiv = document.createElement('div');
    tDiv.className = "transition";
    container.appendChild(tDiv);
    tDiv.style.pointerEvents = "all";
    tDiv.style.backfaceVisibility = "hidden";
    tDiv.style.zIndex = 10;
    tDiv.style.width = transitionDivSize + "px";
    tDiv.style.height = transitionDivSize + "px";

    //tDiv.style.webkitTransform = "translate3d(" + (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px," + (tDiv.offsetHeight) + "px, 1px)";
    //tDiv.style.webkitTransition = 'none';
    window.setTimeout(function () {
        var durationEase = (Math.random() * 10 + 5) + "s linear";
        //tDiv.style.webkitTransition = "-webkit-transform " + durationEase;
        //tDiv.style.webkitTransform = "translate3d(" + (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px," + (window.innerHeight - tDiv.offsetHeight) + "px, 1px)";
        tDiv.style.top = (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px";
       ...