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;
}

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 = "opacity " + 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)";
	}, 0);
}